对我来说，使用 ES6 模块以及使用导入/导出语法的 npm 模块最简单的方法是什么？

Question

如今，ES7 模块几乎已在浏览器中得到普遍支持。这个问题的旧解决方案似乎涉及将 babel 与 Browserify 或 Webpack 结合使用。这仍然是对本地和 npm 模块使用 ES6 导入/导出语法的最简单且充分支持的方法吗？

编辑：是咆哮。蒸馏它。

Answer 1

TLDR：使用捆绑器仍然是发布/打包应用程序的最佳方式。

这不仅仅是模块的问题。它与服务器拓扑和整体捆绑有更多关系。

例如，您有一些npm作为 ES 模块（又名语法）提供的第三方模块import/export。它通常会安装在node_modules文件夹中，其依赖项也会安装在文件夹中。现在，您将在代码中使用此模块，您希望像这样使用它

import xyz from 'my-npm-module';

通过以上简单的表述，却存在多个问题。上述类型的导入是非相对导入。对于 Node.js 或像 Webpack 或 Rollup 这样的捆绑器，这是一个简单的问题，从当前目录开始查找node_modules文件夹，一直查找到根分区。

现在浏览器没有这种非相对导入解析的知识（浏览器不使用节点样式模块解析）。因此，第一个问题是浏览器如何知道在服务器上哪里查找此类模块。第二个问题，假设您以某种方式教浏览器使用非相对模块并遵循 Node 样式解析算法，您仍然需要打包整个node_modules文件夹（包括子目录）。这是一个非常繁琐的过程，并且不必要地增加了应用程序的最终构建大小。

这些就是为什么你仍然需要使用 Webpack 和 Browserify 这样的捆绑器的原因。为了保持简洁，如果你不想支持旧的 JS 引擎，你可以跳过 Babel。但是，如果您确实想使用 ES 模块并将其发送到浏览器，请考虑使用Rollup.js支持输出格式的模块，而ES module不是 WebpackUMD或Common.js.

您可以考虑使用另一种替代System.js方法JSPM来捆绑应用程序，其中ES modules是默认值，但它不提供像 Webpack 或 Rollup 那样的灵活性。此外，还有一个新的捆绑器 -Parcel.js旨在成为零配置解决方案，并且非常易于使用。您不会注意到所有复杂的皮带和口哨。

最后，现实世界的前端捆绑不仅仅与 JavaScript 有关。还有其他资产，如 TS 文件、ReasonML 文件、图像、SVG 文件，您可能希望使用高级优化（如 Tree Shaking、HMR（开发模式））进行转译并与最终捆绑包捆绑在一起，这些捆绑包确实非常擅长。