如何将 npmjs.com 存储库中的 React 相关节点包转换为 ES5？

Posted 2023-02-22

【中文标题】如何将 npmjs.com 存储库中的 React 相关节点包转换为 ES5？

【英文标题】：How to convert React related node packages in npmjs.com repository to ES5?

【发布时间】：2018-04-08 17:17:38

【问题描述】：

作为一个新手，我试图了解 npmjs.com 存储库中反应包的底层逻辑。

我觉得这有点奇怪，因为我安装的某些模块可以完美地与我的应用程序配合使用（例如 react-motion），其中有些模块会通过给出 Uncaught SyntaxError: Unexpected token import 错误（例如 react-sortable-pane）而拒绝工作。

到目前为止我的理解是它与 ES5 有关。使用 ES6 或 ES7 实现的模块必须转换为 ES5。

我的问题是，我如何理解一个包是否不兼容 ES5，以及在我使用 yarn add 命令将包安装到我的node_modules目录期间或之后如何将其转换为 ES5？

【参考方案1】：

解决方案是考虑任何版本的 javascript 并使用转译器来确保可能在您的代码和导入的模块中的各种 JS 版本将被转译器的配置覆盖。浏览你的模块并试图找出他们使用的 Javascript 版本不是一个实际的练习。大多数项目都有一堆依赖项，所有这些包都有自己的依赖项。所以你最终会掉进兔子洞。

Babel 可能是最著名的转译器。通过正确的配置，您可以拥有 ES5、6 或 7 代码，它会将所有代码转换为相同的 JS 类型，因此它可以在所有标准浏览器版本中运行。

基本上，答案不是尝试推断您的模块是什么 ES 类型，而是创建一个可以处理不同类型的构建过程。

【讨论】：

感谢@Jayce444 的回答。那么显而易见的问题是，是否有一个通用的方法（我不知道，也许是 webpack 的通用配置）可以将任何已安装的 React realted node 模块并吐出一个浏览器可以理解的版本。

就像我说的，巴别塔。 Webpack 和 Babel 是最好的伙伴 :D 你会发现很多关于如何使用 webpack 配置 babel 来构建你的 web 应用程序的例子，只是谷歌周围（这里有一个例子：ccoenraets.github.io/es6-tutorial/setup-webpack）。请记住，不要使用babel-preset-2015 包，使用babel-preset-env 包，因为它将处理all 版本的Javascript。并且不要忘记查看 Babel 文档以获取配置选项以及有关它的作用/可以做什么的更多信息:)

【参考方案2】：

TL:DR 转译您的代码或使用：

import SortablePane, Pane from 'react-sortable-pane/lib/react-sortable-pane.es5';

首先要做的事情。

两个主要文件夹 Src 和 Lib

javascript 项目的一个常见约定是将所有开发代码放入名为src 的文件夹中。此文件夹可能包含 ES5 或 ES6 等代码，具体取决于开发人员想要使用的内容。

另一个主文件夹通常称为 lib，其中包含来自 src 的所有代码，这些代码被转译（例如使用 babel 从 ES6 到 ES5）、转换并通常捆绑（例如 webpack minify）以便它可以工作在该 npm 包支持的浏览器中（显然因包而异）。此文件夹仅包含与使用该软件包的用户相关的代码，即所有测试都没有被转换和捆绑，因为它们没有理由这样做。

入口点

npm 包的另一个重要部分是 npm 包的入口点。默认情况下，NodeJS 会在导入的包中查找 index.js 文件（我认为）。这可以通过在 package.json 中提供 main 键来覆盖。

react-motion 的 package.json 中的示例：

"main": "lib/react-motion.js"

我们可以看到 this 指向lib。但是他们的 Github 上的 lib 文件夹在哪里？？？这不是他们的，因为通常您不想签入 lib 文件夹以进行源代码管理，因为它只是为 npm 包编译。

我们可以通过安装 react-motion 并查看 node_modules/react-motion 来确认这一点。此处的 lib 文件夹包含已转译的代码，可以在任何没有 babel 的浏览器中使用。

但是为什么不是所有的 npm 包都为我做这个！？！？？！

大多数都这样做，他们应该这样做。我在我的包裹里做。

react-sortable-plane npm 包正在使用 "jsnext:main": "./lib/react-sortable-pane.js"，这基本上意味着它在任何地方都使用 ES5 语法，但带有导入/导出功能，我以前从未见过，因为它没有被广泛使用。

见https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features

至于为什么他们只使用带有 ES5 功能的导入/导出，我想是因为导入/导出现在已经成为标准，但我不确定。

如果您想要旧版浏览器支持或仅导入 .es5.js 文件，您仍然需要转译此包，例如：

import  SortablePane, Pane  from 'react-sortable-pane/lib/react-sortable-pane.es5';

希望这会有所帮助。我知道它与 UMD、Common、Node 等这么多该死的环境令人困惑......

【讨论】：

答案很好，谢谢。但是在同一目录下“npm install”两个不同的模块（比如 react-motion 和 react-sortable-panes）之后我仍然迷失了（所以它们位于根项目文件夹的同一个 node_modules 目录中）。那么我应该采取哪些步骤来转换 react-sortable-pane 并使用它，例如我应该选择哪个文件作为入口点？感谢您提供可能的指导。

@MehmetKaplan 实际上你根本不需要编译任何包。只需使用react-sortable-pane/lib/react-sortable-pane.es5，因为您显然需要支持不支持导入/导出语句的旧浏览器。这就是这个文件的用途。如果该文件不存在，那么您将不得不使用 babel 将包导入/导出转换为 require 语句，但是这个 .es5 文件已经为您完成了。

谢谢@MartinDawson。那要容易得多。 :-))

@MehmetKaplan 没问题。如果您使用的任何 npm 包没有提供在旧浏览器中工作的转译文件，我建议您要求包所有者为该包创建一个而不是自己转译，但其中 99% 已经这样做了，它们有时只是命名不同您可能需要检查 lib 文件夹是否有您想要的。

这一点也很清楚。再次感谢@MartinDawson