简体繁体 English

ES6模块串联

[英]ES6 module concatenation

原文 2014-11-06 23:50:56 7 3 javascript/ node.js/ ecmascript-6

Developing a web project in JavaScript ES6 , I currently use Traceur to compile my modules from ES6 to ES5, thinking that in the future, when browser will support ES6, I would be able to skip that transpilation step. 在JavaScript ES6中开发一个Web项目，我目前使用Traceur将我的模块从ES6编译到ES5，以为将来在浏览器支持ES6时，我可以跳过该编译步骤。

In the end, because I don't want to download several js pieces at start up, I have a single file that contains all my modules converted into ES5, thanks to Traceur. 最后，由于我不想在启动时下载多个js片段，因此我有了一个文件，其中包含所有我转换为ES5的模块，这要归功于Traceur。

But to validate this choice, I was wondering if this could still be possible the day I would keep the source in ES6. 但是，为了验证这一选择，我想知道是否仍可以将源代码保留在ES6中。 If I simply concatenate them, there will be invalid imports and name conflicts. 如果仅将它们连接起来，将存在无效的导入和名称冲突。

It looks like it has not been designed for it and it would require a extra processing step to merge them correctly. 似乎尚未为其设计，因此需要额外的处理步骤才能正确合并它们。

How are we suppose to handle ES6 single file project defined with several modules ? 我们应该如何处理由多个模块定义的ES6单文件项目？

3 个解决方案

这将通过捆绑来解决，如此处所述： http : //www.2ality.com/2013/11/es6-modules-browsers.html第3章。因此这是可行的，并且可以验证您的方法，尽管我无法做到可以在网上找到相应编译步骤的实现，但是应该在人们开始使用ES6模块时出现。

In the near future, there won't be anymore the need to build single file project thanks to HTTP/2 . 在不久的将来，由于有了HTTP/2 ，将不再需要构建单个文件项目。

See: Why bundle optimizations are no longer a concern in HTTP/2 请参阅：为什么捆绑包优化不再是HTTP / 2的关注点

The best solution is probably going to be to use browserify to bundle your transpiled code into one file. 最好的解决办法很可能将是使用browserify捆绑你的transpiled代码到一个文件中。 Then I'd use uglify or Google's Closure Compiler to minify the file, given there is a slight size overhead given all the imports/exports that have to be dealt with. 然后我会使用uglify或Google的Closure Compiler来缩小文件，因为考虑到所有必须处理的导入/导出的开销很小。

Also, if you're willing to use Babel instead of Traceur, there's a Babel plugin for browserify to make things really easy. 另外，如果您愿意使用Babel而不是Traceur，那么可以使用Babel插件进行browserify使事情变得非常简单。