How do I concatenate ES6 modules?

Question

How can I concatenate ES6 modules?

var foo = 2; // This would normally be scoped to the module.
export function Bar() {}

// ...concatenate...

import { Bar } from 'javascripts/bar' //This file no longer exists in the concatenated scenario.
export function Bam() {}

Solution 1

Update 2020-09-02: Esperanto was replaced by Rollup some time ago, and is a great choice for this problem. Depending on your needs, Webpack may also be a good choice.

---

If what you want to do is create a single JavaScript file that does not internally use ES6 modules, so that you can use it with browsers/node today, then I recommend using Esperanto (full disclosure, I'm a maintainer of the project). It allows you to create a bundle that concatenates all of the files together without the use of a loader like you'd get using something like browserify or webpack. This typically results in smaller code (no loader), better dead code elimination (when using a minifier like Google Closure Compiler or UglifyJS), and better performance as the JS interpreter is better able to optimize the result.

Here's an example usage, but note that there are plenty of tools to integrate Esperanto into your workflow:

var fs = require( 'fs' );
var esperanto = require( 'esperanto' );

esperanto.bundle({
  base: 'src', // optional, defaults to current dir
  entry: 'mean.js' // the '.js' is optional
}).then( function ( bundle ) {
  var cjs = bundle.toCjs();
  fs.writeFile( 'dist/mean.js', cjs.code );
});

This example is taken from the wiki page on bundling ES6 modules.

Solution 2

I would suggest that you take a look at http://webpack.github.io and then combine it with babel.

alternatively you can do it with babel alone:

https://babeljs.io/docs/usage/cli/

Comments

[DaveS]

What do you mean by //This file no longer exists in the concatenated scenario.? You have to import it from a file, or include its content inline. Are you trying to import Bar without a separate file to define Bar in?

[Benjamin Gruenbaum]

What do you mean by concat? What's wrong with creating a third file that exports both of the two modules' items?

[Ben Aston]

@DaveS I mean that the file javascripts/bar no longer exists after concatenation (because it has been concatenated).

[Ben Aston]

@Benjamin I see now that I can perform a transpilation step before concatenation, so this question is somewhat moot.

[Benjamin Gruenbaum]

It is impossible in the current ES6 syntax to declare two modules in the same file. Does this answer your original question?

[Benjamin Gruenbaum]

Wait, that last statement is wrong, System.module has just been removed from ES6 and put in a different specification - this gives me a headache :S

[Ben Aston]

@BenjaminGruenbaum ES7?

[Benjamin Gruenbaum]

@Ben no they're putting it in a different "living standard" so that browsers and node can discuss it and work on it checking out what works and what doesn't in faster iterations.

[justin]

@Ben, so is "es6 transpilation and then concatenation" the answer then? i.e. is there something else to consider?

[Benjamin Gruenbaum]

@justin personally I can recommend babel (used to be 6to5) it will gladly do this for you in the build step - super useful and produces very nice code.

[justin]

@BenjaminGruenbaum cool, ok thanks. I already use 6to5 (just found out it's been renamed...) through Grunt... then I use a separate task to do the concatenation. I haven't looked too much into it but I guess there ought to be a way to do it straight through "Babel" - thx

[Rob Apodaca]

link esperantojs.org goes to some porn/spam site

[Gabriel]

Can you describe how to achieve it with babel cli alone ?

[David Calhoun]

Looks like babel has the ability to concatenate files, but it won't inline import/require. Those import/require calls will still be present in the concatenated file. Looks like you really need to use something like Webpack to get it to resolve all those script dependencies.