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() {}

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() {}

• javascript
• module
• ecmascript-6
• es6-modules

• 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? – DaveS Commented Dec 15, 2014 at 18:35
• What do you mean by concat? What's wrong with creating a third file that exports both of the two modules' items? – Benjamin Gruenbaum Commented Dec 15, 2014 at 18:35
• 4 It is impossible in the current ES6 syntax to declare two modules in the same file. Does this answer your original question? – Benjamin Gruenbaum Commented Dec 15, 2014 at 18:50
• 1 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 – Benjamin Gruenbaum Commented Dec 15, 2014 at 19:03
• 2 @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. – Benjamin Gruenbaum Commented Feb 18, 2015 at 14:42

2 Answers 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.

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/