Node Server Developer

• No useless stuff in node_modules

Node CLI Utility Creator

• Quickly parsed code

Frontend Developer

• Code that “runs everywhere”
• Statically analyzable ES6 exports

ES6 modules
from a user's perspective

CommonJS		ES6
exports.x = 'foo'	=>	export const x = 'foo'
x = require('y').x	=>	import {x} from 'y'
require can be used anywhere	=>	import and export only allowed at the top level
require(…) permits dynamic module names	=>	import … from enforces explicit module names

ES6 modules
from a module bundler's perspective

• Can identify unused modules without executing code
• Can remove code for unused exports a.k.a.
  tree-shaking

{
  // ...
  "main": "dist/index.js", // CommonJS version
^1^  "module": "dist/index.mjs", // ES6 version^^
  // ..
}

rollup.js

• Bundles ES6 modules into a single file
• Supports various output formats: ES6,
  CommonJS, AMD, global variable…
• Optimizes output via
  scope-hoisting and tree-shaking

require('rollup')
^1^  .rollup({entry: 'src/index.js'})^^
^2^  .then(bundle => {
    bundle.write({
      dest: 'dist/index.js',
      format: 'cjs' // CommonJS module
    })^^
^3^    bundle.write({
      dest: 'dist/index.mjs',
      format: 'es' // ES6 module
    })^^
^2^  })^^

$ node build.js

{
  // ...
  "dependencies": {^1^"lodash": "*"^^}
  // ..
}

require('rollup')
  .rollup({
    entry: 'src/index.js'^3^,^^
^3^    external: ['lodash']^^
  })
  .then(bundle => {/* ... */})

{
  // ...
  "devDependencies": {
^1^    "lodash-es": "*",^^
    "rollup": "*"^1^,^^
^1^    "rollup-plugin-node-resolve": "*"^^
  }
  // ..
}

require('rollup')
  .rollup({
    entry: 'src/index.js'^3^,^^
^3^    plugins: [
      require('rollup-plugin-node-resolve')()
    ]^^
  })
  .then(bundle => {/* ... */})

• executed during module initialization
• could potentially have side-effects

• Modifying a global variable:

  String.prototype.myConst = '42'

• Calling most global functions:

  const keys = Object.freeze({x: 1})

• Implicitly calling most global functions:

  '4'.concat('2') // = String.prototype.concat.call('4', '2')

Node Server Developer

• No useless stuff in node_modules

Node CLI Utility Creator

• Quickly parsed code ✔

Frontend Developer

• Code that “runs everywhere”
• Statically analyzable ES6 exports ✔

{
  // ...
  "devDependencies": {
^1^    "babel-preset-latest": "*",^^
    "rollup": "*"^1^,^^
^1^    "rollup-plugin-babel": "*"^^
  }
  // ..
}

require('rollup')
  .rollup({
    entry: 'src/index.js',
    plugins: [
^3^      require('rollup-plugin-babel')({
        presets: [['latest', { es2015: { modules: false } }]]
      })^^
    ]
  })
  .then(bundle => {/* ... */})

Node Server Developer

• No useless stuff in node_modules

Node CLI Utility Creator

• Quickly parsed code ✔

Frontend Developer

• Code that “runs everywhere” ✔
• Statically analyzable ES6 exports ✔

{
  // ...
  "files": ["dist"],
  // ..
}

• Write your code with ES6 modules
• Use rollup to create two bundles
• Distribute them as "main" and "module"
• Avoid side-effects in initialization!
• Transpile to ES5 via babel
  (except import/export statements!)
• Use "files" to specify what to distribute

• husky: Manage git hooks
• lint-staged: Execute commands on staged files
• semantic-release: Publish to npm from your CI with automatic versioning
• greenkeeper: Automatically test against new dependency versions