你如何构建、捆绑和缩小 ES6 模块?

How do you build, bundle & minify ES6-modules?

由于 ES6 模块(JavaScript 模块)可用于测试:

我想知道,我应该如何缩小和准备项目发布文件?早些时候,我将所有 JavaScript 文件捆绑到单个缩小文件中,除非我必须通过 XHR 或 Fetch API.

动态加载 JS 文件。

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

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

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

该博客解释说,使用 SystemJs 作为 ES6 module polyfillBabel 以及 Gulp 将使您能够在 ES6 中编写模块代码今天就可以用了。

https://www.barbarianmeetscoding.com/blog/2016/02/21/start-using-es6-es2015-in-your-project-with-babel-and-gulp/

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

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

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

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

为什么webpack要这么做?当然,由于本机在浏览器中不支持 ES 模块,这就是为什么 webpack 解析 import 语句并以同步方式循环依赖项*,然后将其替换为 IIFE 以进行范围界定。并执行 babel 翻译和 polyfilling,是的。

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

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

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