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

Question

如今，ES7 模块几乎已在浏览器中得到普遍支持。这个问题的旧解决方案似乎涉及使用带有 Browserify 或 Webpack 的 babel。这仍然是为本地和 npm 模块使用 ES6 导入/导出语法的最简单且得到充分支持的方法吗？
编辑:是一个咆哮。蒸馏它。

Answer 1

TLDR: Using bundler is still the best way to ship/package your application.

这不仅仅是模块的问题。它更多地与服务器拓扑和整体捆绑有关。
例如，您有一些第三方 npm作为 ES 模块 aka import/export 提供的模块句法。它通常安装在 node_modules 中。文件夹，它的依赖项也是如此。现在，你将在你的代码中使用这个模块，你会想要像这样使用它

import xyz from 'my-npm-module';

有了上面的简单陈述，就有多个问题。以上导入类型为 非亲属 进口。对于 Node.js 或 Webpack 或 Rollup 之类的打包工具，只需查看 node_modules 即可。文件夹从当前目录开始，一直到根分区。
现在浏览器没有 这样的知识非亲属 导入解析(浏览器不使用 Node 样式的模块解析)。因此，第一个问题是浏览器如何知道在服务器上的何处查找此类模块。第二个问题，假设您以某种方式教浏览器使用 非亲属 模块并遵循 Node 风格的解析算法，你仍然需要打包整个 node_modules文件夹，包括子目录。这是一个非常繁琐的过程，并且不必要地增加了应用程序的最终构建大小。
这就是为什么你仍然需要使用像 Webpack 和 Browserify 这样的打包工具的原因。为了保持精简，如果你不想支持旧的 JS 引擎，你可以跳过 Babel。但是，如果您真的想使用 ES 模块并将其发送到浏览器，请考虑使用 Rollup.js支持输出格式为 ES module与 Webpack 的 UMD 相比或 Common.js .
您可以考虑使用 System.js 的另一种选择+ JSPM ES modules 绑定(bind)申请方式是默认值，但它不像 Webpack 或 Rollup 那样提供灵 active 。此外，还有一个新的捆绑器 - Parcel.js它旨在成为零配置解决方案并且非常易于使用。您不会注意到所有复杂的腰带和口哨声。

In the end, real world front-end bundling is not just about JavaScript. There are other assets like TS files, ReasonML files, Images, SVG files which you might want to transpile and bundle with final bundle with using advanced optimizations like Tree shaking, HMR (dev mode) where bundles really excel at.