你如何构建、打包和缩小 ES6 模块？答案

【问题标题】：How do you build, bundle & minify ES6-modules?你如何构建、打包和缩小 ES6 模块？
【发布时间】：2017-07-30 14:04:51
【问题描述】：

事实上，ES6 模块（JavaScript 模块）可用于测试：

我想知道，我应该如何缩小和准备项目发布文件？早些时候，我已经将所有 JavaScript 文件捆绑到单个和缩小的文件中，除非我必须通过 XHR 或 Fetch API 动态加载 JS 文件。

据我了解，现在用 ES6 模块准备单个压缩文件是相当不可能的，或者可能是，我只是误解了一些工作方式。

那么，有什么方法可以将我的 ES6 模块准备成单个文件，以及我应该如何准备 2017 年的现代 JavaScript 项目，其中 JavaScript 模块将可用？

【问题讨论】：

使用像 webpack 这样的打包工具
之前，我已将所有 JavaScript 文件捆绑到单个缩小文件中：为什么您不能使用 ES2015 模块这样做？
@SvenvandeScheur webpack 是否与 ES6 模块一起工作？或者它只是将 JS 代码转换为带有源映射的 ES5 脚本？如果最后一个选项是正确的，那么它是 2017 年相当老的解决方案。如果 web 浏览器提供了使用 ES6 模块分离项目的新方法，为什么不找到如何以更愉快的方式使用现代特性的方法呢？ PS：另外，我在 1 年前使用过 webpack，老实说……这是一个相当丑陋的设计项目（对我来说）。
@PeterMader 也许是因为，import/export 的东西他们有不同的范围。如果是单个文件，你将如何从模块 B 加载模块 A？
Webpack 允许您以最少的配置捆绑 ES6 模块：例如ccoenraets.github.io/es6-tutorial/setup-webpack

【解决方案1】：

我想知道，我应该如何缩小和准备项目发布文件？

这就是这个动作的目的？好的，缩小文件占用的网络流量更少，下载速度更快，但大多数 NPM 库已经提供了缩小的dist-files。关于捆绑在一个大文件中的主要问题。

为什么 webpack 这样做？当然，由于本机不支持浏览器中的 ES 模块，这就是为什么 webpack 会以同步方式解析 import 语句和循环依赖*，然后将其替换为 IIFE 进行作用域。并执行 babel 翻译和 polyfill，是的。

但是随后开始了对 ES 模块的原生支持，它变得无用了。将您的 Web 应用程序公开到生产环境时的主要目标之一是使用 CDN 减少服务器的流量。现在你可以用原生的方式来做，所以只需从 unpkg.org 导入 ES-modules 就可以了

*如果不使用HMR，当然可以，但是不适合生产模式。

【讨论】：

But then native support of ES-modules is started, it's become un-useful.，我对这条线很感兴趣，因为我看到这个未来很快......
@Neverlands 添加了关于您的问题的实时示例的链接。（如果有用别忘了点赞）
很高兴投票，但不能因为小名声。什么时候达到要求的数量，我会投票。
2020年看看这个，有没有办法缩小这些文件？我试图在没有 npm 包的情况下做到这一点......

【解决方案2】：

此博客解释了您将如何使用ES6 module syntax，但仍将您的代码捆绑到浏览器可以理解的内容中。

该博客解释说，将SystemJs 用作ES6 module polyfill 和Babel 以及Gulp 将使您能够在ES6 中编写模块代码，但今天仍然可以使用它。

使用本指南将帮助您在 ES6 中编写代码，同时仍然拥有构建、缩小和捆绑代码的正常工作流程。

请记住，有很多工具可以帮助您实现这一目标，但我已经多次使用这种方法，我可以保证它的有效性。

【讨论】：

我知道这件事。但是，据我了解，它仍然提到将源代码翻译成 ES5 脚本，而 NATIVE 模块不会以这种方式工作。它只会使用 Babel 翻译/源映射。这不是我想要的。我想知道模块的 NATIVE 工作，以及在没有 babel、webpack 或其他翻译器的情况下缩小 ES6 模块的可能性......
@Neverlands 正如您所说的，ES6 模块尚不支持，因此需要某种形式的转译为 ES5 代码。
但是，如您所见，它将很快得到支持。那又怎样？我对新的工作方式很感兴趣。我对通过 babel、webpack 和其他相关东西使用缩小/polyfills 的方式不感兴趣。网络浏览器提供了新的工作方式，我对此非常感兴趣，而不是我已经在使用的旧的准备方式。
我相信 ES2015 模块的任意集合不能捆绑到一个 ES2015 模块中。由于 ES2015 模块的语义，即导入标识符的作用域和解析，这根本不可能。只有使用根模块或入口模块才能实现此目的；结果是一个包含依赖项的模块，并且只公开了根模块或入口模块的导出标识符。是否有一个捆绑器可以做到这一点？此外，您还可以将依赖树的其他部分捆绑在一个 ES2015 模块中。