4

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

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

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

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

4

2 回答 2

3

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 文件（我认为）。这可以通过main在 package.json 中提供密钥来覆盖。

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 等这么多该死的环境令人困惑……

于 2017-10-31T17:53:27.670 回答
1

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

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

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

于 2017-10-27T07:57:00.503 回答