ECMAScript modules

Can ECMAScript modules be bundled?

Person in shorts with blue hair walking left


Modern browser-focused JavaScript tends to use JavaScript modules, which are also supported in Node.js 12+. Unlike CommonJS or UMD, JavaScript Modules have a specific syntax that is more restrictive and designed to enable static analysis. This allows bundlers to more reliably parse and extract information about module exports and their usage, which can then be used to optimize bundles by removing unused exports - a process commonly referred to as tree-shaking.

The Test

This test bundles two ECMAScript Modules: one entry module, and a dependency it imports.


import esm from './esm.js';


export default 'my string';

In order to pass the test, the result of bundling these modules should be a single JavaScript file, where 'my string' is logged.

Ideally, the string export from esm.js can be inlined where it is used in index.js, removing the module's representation from the bundle entirely, and stripping away any module loading runtime. The contents of the bundle should essentially be console.log('my string'), although this optimization may require a minifier.



Browserify is targeted at CommonJS and polyfills require() in a browser’s context. It does not support the JavaScript module syntax unless Babel is used to compile JavaScript modules to CommonJS before Browserify processes them.



Parcel supports ECMAScript modules.


Rollup supports ESM by default.


Webpack supports JavaScript Modules, and attempts to leverage their static nature to perform optimizations like tree-shaking and scope hoisting.