ES6 module concatenation

Question

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.

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.

But to validate this choice, I was wondering if this could still be possible the day I would keep the source in 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 ?

possible duplicate of [How do I concatenate ES6 modules?](http://stackoverflow.com/q/27488485/1048572), see also [Concatenate imports in modules in babeljs](http://stackoverflow.com/q/31015250/1048572) — Bergi, Aug 08 '15 at 18:15

score 3 · Answer 1 · answered Nov 06 '14 at 23:52

This will be solved by bundling, as described here: http://www.2ality.com/2013/11/es6-modules-browsers.html in chapter 3. So this is possible and validate your approach, although I couldn't find an implementation of the corresponding compilation step on the web, but it should arise when people start using ES6 modules.

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

In the near future, there won't be anymore the need to build single file project thanks to HTTP/2.

See: Why bundle optimizations are no longer a concern in HTTP/2

edited May 23 '17 at 11:53

Community

1
1

answered Sep 29 '15 at 23:01

JBE

11,917
7
49
51

score 0 · Answer 3 · answered Aug 08 '15 at 15:22

The best solution is probably going to be to use browserify to bundle your transpiled code into one file. 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.

Also, if you're willing to use Babel instead of Traceur, there's a Babel plugin for browserify to make things really easy.

ES6 module concatenation

3 Answers3