es6-esm-boilerplate

es6-esm-boilerplate

Build ES modules from ES6 source code with Webpack.

Starting with this boilerplate, we can develop simple-to-complex ES Modules targeting the latest browsers, development with Babel, and Node runtime. At the same time, the ES5-compatible build is also generated.

Input/output structure

es6-esm-boilerplate
├── package.json
├── webpack.config.js
├── src                         # ES6 source code
│   ├── Base.js                 # class 
│   ├── Foo.js                  # subclass of Base
│   ├── Bar.js                  # subclass of Base
│   ├── index.js                # module implementation (export { Foo, Bar })
│
├── lib                         # ES module output
│   ├── my-module.js            # esm
│   ├── my-module.min.js        # esm minified
│   ├── my-module.compat.js     # esm with ES5-compatibility
│   ├── my-module.compat.min.js # esm with ES5-compatibility minified

How it works

ES6 source code          -> var-module             -> my-module.js (export default MyModule;)
{Base,Foo,Bar,index}.js     (var MyModule = ...;)  -> my-module.compat.js (UMD)

First, bundle ES6 source code into a var-module. Then, export the var-module using the ES Module's export syntax to finally get my-module.js. This module file can be directly consumed on relatively new browsers.

we also build my-module.compat.js for compatibility with older browsers, development with Babel, and NodeJS. This module file conforms to the UMD patterns that provide the script-tag loading, Node-require, and AMD compatibilities.

All the "var-to-esm transformation" is performed by a tiny Webpack plugin called webpack-var2esm-plugin.

Demo

• examples/latest-browsers (source code)
• examples/babel (source code)
• examples/script-tag (source code)
• examples/amd (source code)

Build

$ npm install  # set up build tools
$ npm run build  # get ES module output in lib/ by Babel