作为一个新手，我试图了解npmjs.com存储库中的反应包的逻辑是什么。
我发现它有点奇怪，因为我安装的某些模块与我的应用程序（例如react-motion）完美配合，其中一些模块通过给出Uncaught SyntaxError: Unexpected token import错误拒绝工作（例如{{3 }}）。
我现在所理解的是它与ES5有关。使用ES6或ES7实现的模块必须转换为ES5。
我的问题是，我如何理解一个软件包是否与ES5兼容？如何在使用yarn add命令将软件包安装到我的node_modules期间或之后将其转换为ES5？ ？目录
答案 0 :(得分：3)
TL：DR 透明代码或使用：
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
首先要做的事情。
两个主要文件夹Src和Lib
javascript项目的一个常见约定是将所有开发代码放入名为src的文件夹中。此文件夹可能包含ES5或ES6等代码，具体取决于开发人员希望使用的内容。
另一个主文件夹通常称为lib，其中包含来自src的所有代码，这些代码已被转换（例如从ES6到ES5的babel），已转换并通常捆绑（例如webpack minify），因此它可以在npm包支持的浏览器中工作（显然从包到包不同）。此文件夹仅包含与使用该软件包的用户相关的代码，即所有测试都不会被转换和捆绑，因为它们没有理由。
入口点
npm包的另一个重要部分是npm包的入口点。默认情况下，NodeJS将在导入的包中查找index.js文件（我认为）。这可以通过在package.json中提供main键来覆盖。
react-motion＆packages.json中的示例：
我们可以看到这指向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语法，但是使用导入/导出，我以前没见过，因为它并不广泛使用
至于他们为什么只使用带有ES5功能的导入/导出，我认为它是因为导入/导出现在已成为标准，但我不确定。
如果您需要较旧的浏览器支持或只是导入.es5.js文件，您仍然需要转换此程序包，例如：
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
希望这会有所帮助。我知道它与UMD，Common，Node等许多该死的环境混淆......
答案 1 :(得分：1)
解决方案是考虑任何版本的Javascript并使用转换器来确保您的代码和导入模块中的各种JS版本将被您的转换器配置覆盖。浏览你的模块并试图找出他们使用的Javascript版本不是一个实际的练习。大多数项目都有一堆依赖项，所有这些包都有自己的依赖项。所以你最终会走下一个兔子洞。
Babel可能是最着名的转录程序。使用正确的配置，您可以使用ES5,6或7代码，并将其全部转换为相同的JS类型，以便它可以在所有标准浏览器版本中运行。
基本上，答案并不是要尝试推断出你的模块的ES类型，而是要创建一个可以处理不同类型的构建过程。