你如何建立，捆绑＆amp;缩小ES6模块？

Question

由于ES6模块（JavaScript模块）可用于测试：

• https://www.chromestatus.com/feature/5365692190687232
• https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

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

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

那么，有哪些方法可以将我的ES6模块准备到单个文件中，以及我应该如何在2017年准备现代JavaScript项目，那里将提供JavaScript模块？

Answer 1

  

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

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

为什么webpack会这样做？对于cource，原因是浏览器中缺少对ES模块的支持，这就是为什么webpack以同步方式解析import语句和舍入依赖关系*，然后将其替换为IIFE以进行范围确定。并执行babel翻译和polyfilling，是的。

然后开始对ES模块的原生支持，它变得无用了。将Web应用程序暴露给生产时的主要目标之一是使用CDN缩小服务器的流量。现在您可以以原生方式进行，因此只需从unpkg.org导入ES模块并快乐

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

此处的实例：https://jakearchibald.com/2017/es-modules-in-browsers/

Answer 2

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

该博客解释说，使用ES6 module syntax作为SystemJs和ES6 module polyfill以及Babel将使您能够在Gulp中对模块进行编码，但却能够今天使用它。

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

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

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