ES6 模块串联

Posted 2023-03-10

【中文标题】ES6 模块串联

【英文标题】：ES6 module concatenation

【发布时间】：2015-01-03 16:16:12

【问题描述】：

在 JavaScript ES6 中开发一个 web 项目，我目前使用Traceur 将我的模块从 ES6 编译到 ES5，认为将来当浏览器支持 ES6 时，我将能够跳过那个转译步骤。

最后，因为我不想在启动时下载几个 js 片段，所以我有一个文件，其中包含我所有转换为 ES5 的模块，感谢 Traceur。

但是为了验证这个选择，我想知道在我将源代码保留在 ES6 中的那一天，这是否仍然可行。如果我只是将它们连接起来，就会出现无效的导入和名称冲突。

看起来它不是为它设计的，需要额外的处理步骤才能正确合并它们。

我们应该如何处理由多个模块定义的 ES6 单文件项目？

【问题讨论】：

How do I concatenate ES6 modules? 的可能重复项，另请参阅 Concatenate imports in modules in babeljs

【参考方案1】：

这将通过捆绑解决，如下所述：第 3 章中的http://www.2ality.com/2013/11/es6-modules-browsers.html。 所以这是可能的并且验证了你的方法，虽然我在网上找不到相应编译步骤的实现，但是当人们开始使用 ES6 模块时应该会出现。

【参考方案2】：

在不久的将来，感谢HTTP/2，将不再需要构建单文件项目。

见：Why bundle optimizations are no longer a concern in HTTP/2

【参考方案3】：

最好的解决方案可能是使用browserify 将您的转译代码捆绑到一个文件中。然后我会使用 uglify 或 Google 的 Closure Compiler 来缩小文件，因为考虑到所有必须处理的导入/导出，会有一点大小开销。

另外，如果你愿意使用 Babel 代替 Traceur，还有一个用于 browserify 的 Babel 插件，让事情变得非常简单。