javascript - 你如何构建、打包和缩小 ES6 模块？

Question

由于事实上，ES6 模块(JavaScript 模块)可用于测试:

https://www.chromestatus.com/feature/5365692190687232

https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

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

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

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

Answer 1

I wonder, how should I minify and prepare the project release-file?

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

为什么 webpack 这样做？当然，由于原生浏览器不支持 ES 模块，webpack 解析 import 的原因是什么？以同步方式*声明和循环依赖项，然后将其替换为 IIFE 以进行范围界定。并执行 babel 翻译和 polyfill，是的。

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

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

现场示例: https://jakearchibald.com/2017/es-modules-in-browsers/