Rollup.js

/me

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

Features

• 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

Limitations

• 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

RollupJs

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.

Source

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"
}

jsnext:main

In practice

github.com/js-republic/rollup-sample

Conclusion

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

Thank you

@MatBreton

Rollupjs.org