This article has been translated into Chinese
How to build and publish ES6 modules with Babel and RollupWelcome to
“Gold Digging Translation Project”Translation of quality technical articles.

The ES2015 specification, also referred to as ES6, has been approved by ECMA International back in June 2015. In April 2016, Node.js Foundation team has released Node.js framework v6 supporting 93% of ES6 language features, thanks to V8 v5.0.

It’s hard to argue that having a JavaScript library written by using ES6+ syntax and existing language features instead of relying on 3rd party libraries and plyfills has clear benefits. Such as having less verbose, more readable code, using fewer abstractions, having the codebase that is easy to maintain and extend, being able to develop your library faster, first to market in the Lean Startup terminology.

You’re developing a brand new JavaScript Library (NPM Module) Targeting Node.js Platform, it might be a good idea to publish it on NPM optimized for Node.js v6 environment, and optionally provide a fallback for developers who are still forced to use v5 and earlier versions of Node.js. So that, Node 6 users could import your library as regular:

const MyLibrary = require('my-library');Copy the code
var MyLibrary = require('my-library/legacy');Copy the code
.├ ─ / Dist / # Temp Folder for Compiled Output ├─ / Legacy / # Legacy Bundle (s) for Node 0. 4. X │ ├─ / Main.js # ├─ for Node 0. ├─ ├─ 2. X │ ├─ ├─ 2. │ ├─ 2. │ ├─ 2 / Main.mjs # ES6 bundle/W Modules for Cool Kids │ ├─ /main.browser. Js # ES5.1 bundle for ├─ /my-library.js # UMD bundle for Browsers │ ├─ / My-library.min.js # UMD bundle. Minified and optimized │ ├─ /package.json # NPM module Settings ├─ /node_modules/ # 3rd-party libraries and utilities ├─ / SRC / # ES2015+ Source Code │ ├─ / Main.js # The Main Entry Point │ ├─ / Sub-modul # A module referenced in ├─ ├─ / # ├─ / # ├─ / # ├─ / # └─ Build automation scripts and utilities └─ / Build  settingsCopy the code

Where you have the “src” folder containing ES2015+ source code of your library, and a “dist” (or “build”) folder, that is created on the fly when you build the project. From that “dist” folder you will publish your NPM library containing CommonJS, ES6 and UMD bundles compiled with Babel and Rollup.

The “package.json” file will contain references to these bundles:

{" name ":" my - library ", "version" : "1.0.0", "main" : ". The main js ", "jsnext: main" : ". The main MJS ", "browser" : "main.browser.js", ... }Copy the code

“Tools /build.js” script is a handy way to configure that compilation step. It may look as follows:

'use strict'; const fs = require('fs'); const del = require('del'); const rollup = require('rollup'); const babel = require('rollup-plugin-babel'); const uglify = require('rollup-plugin-uglify'); const pkg = require('.. /package.json'); const bundles = [ { format: 'cjs', ext: '.js', plugins: [], babelPresets: ['stage-1'], babelPlugins: [ 'transform-es2015-destructuring', 'transform-es2015-function-name', 'transform-es2015-parameters' ] }, { format: 'es6', ext: '.mjs', plugins: [], babelPresets: ['stage-1'], babelPlugins: [ 'transform-es2015-destructuring', 'transform-es2015-function-name', 'transform-es2015-parameters' ] }, { format: 'cjs', ext: '.browser.js', plugins: [], babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: [] }, { format: 'umd', ext: '.js', plugins: [], babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: [], moduleName: 'my-library' }, { format: 'umd', ext: '.min.js', plugins: [uglify()] babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: [], moduleName: 'my-library', minify: true } ]; let promise = Promise.resolve(); // Clean up the output directory promise = promise.then(() => del(['dist/*'])); // Compile source code into a distributable format with Babel and Rollup for (const config of bundles) { promise = promise.then(() => rollup.rollup({ entry: 'src/main.js', external: Object.keys(pkg.dependencies), plugins: [ babel({ babelrc: false, exclude: 'node_modules/**', presets: config.babelPresets, plugins: config.babelPlugins, }) ].concat(config.plugins), }).then(bundle => bundle.write({ dest: `dist/${config.moduleName || 'main'}${config.ext}`, format: config.format, sourceMap: ! config.minify, moduleName: config.moduleName, }))); } // Copy package.json and LICENSE.txt promise = promise.then(() => { delete pkg.private; delete pkg.devDependencies; delete pkg.scripts; delete pkg.eslintConfig; delete pkg.babel; fs.writeFileSync('dist/package.json', JSON.stringify(pkg, null, ' '), 'utf-8'); fs.writeFileSync('dist/LICENSE.txt', fs.readFileSync('LICENSE.txt', 'utf-8'), 'utf-8'); }); promise.catch(err => console.error(err.stack)); // eslint-disable-line no-consoleCopy the code
View Raw Build.js Hosted with ❤ by GitHub

Now you can build your library by running “node tools/build” (assuming you have Node.js 6 installed on your local machine) and publish it from inside the “dist” folder to NPM registry.

I hope this post will be helpful for developers trying to figure out what’s the best way to publish ES6 on NPM. You can Also find a pre-configured NPM library Boilerplate here: github.com/kriasoft/ba…

If you think something is missing or inaccurate, please comment below. Happy coding!