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

Question

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

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

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

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

Answer 1

TL：DR透明你的代码或使用：

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

首先要做的事情。

两个主要文件夹Src和Lib

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

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

入口点

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

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

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

我们可以看到这指向了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等令人困惑......

Answer 2

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

Babel可能是最着名的转换器。 使用正确的配置，您可以使用ES5,6或7代码，并将其全部转换为相同的JS类型，以便它可以在所有标准浏览器版本中运行。

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