Mathieu Breton

CTO at @jsrepublic

What ?

A some kind of JS packager coming from the Future ...

By Bogdan Chadkin

and Oskar Segersvärd

State of art


All packagers bundle entirely the code base, and does not remove the dead code


  • Package Node lib and JavaScript Front asset


  • Output types : UMD, AMD, CommonJS, ES2015, Global


  • Produce smaller bundle than anyone
  • JS API, Tools integration, Command line interface


  • Design to work with the next standard


  • Handle Cyclic dependency


  • Handle only JavaScript assets


  • Works with ES2015 and CommonJS only


  • Needs a ES2015 transpiler (Ex: Babel)

How ?

Based on ES2015 and its modules

// api.js
export function getJson(url) { ... }

// main.js
import {getJson} from "./api";

Remove Dead code with Tree-Shaking

Is it efficient ?

Yes! Minified and gzipped, D3 weighs around 58kB Voronoi Tesselation example weighs just 8kB, including the code itself. Depending on which of d3's functions you're actually using, the savings can be even more dramatic.



For commonJS

NPM : rollup-plugin-commonjs
// importer.js
import { named } from './exporter.js';

// exporter.js
module.exports = { named: 42 };
// importer.js
const named = require("./exporter").named;

// exporter.js
module.exports = { named: 42 };

But prefer ES2015 modules

  "name": "my-package",
  "version": "0.1.0",
  "main": "dist/my-package.umd.js",
  "jsnext:main": "dist/my-package.es2015.js"


In practice


  • Not yet production ready ...
    • Bugs
    • Npm ecosystem needs to evolve
  • Handle only ES2015 modules et CommonJS
  • It is the future

Thank you


By Mathieu Breton


  • 1,792
Loading comments...

More from Mathieu Breton