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