Presentation of Rollupjs

1. Rollup.jsRollup.js

2. /me/me
Mathieu BretonMathieu Breton
CTO at @jsrepublic

3. What ?What ?
A some kind of JS packagerA some kind of JS packager
coming from the Future ...coming from the Future ...
By Bogdan Chadkin
and Oskar Segersvärd

4. State of artState of art
All packagers bundle entirely the code base, and
does not remove the dead code

5. FeaturesFeatures
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

6. LimitationsLimitations
Handle only JavaScript assets
Works with ES2015 and CommonJS only
Needs a ES2015 transpiler (Ex: Babel)

7. How ?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

8. Is it efficient ?Is it efficient ?
Yes! Minified and gzipped, D3 weighs around
58kB 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.
Voronoi Tesselation example
Source

9. For commonJSFor 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 };

10. But prefer ES2015 modulesBut prefer ES2015 modules
{
"name": "my-package",
"version": "0.1.0",
"main": "dist/my-package.umd.js",
"jsnext:main": "dist/my-package.es2015.js"
}
jsnext:mainjsnext:main

11. In practiceIn practice
github.com/js-republic/rollup-sample

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

13. Thank youThank you
@MatBreton@MatBreton
Rollupjs.org