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          


        

Answer 1

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/

Answer 2

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.