Rollup.js
0 likes107 views
Rollup.js is a module bundler for JavaScript which produces smaller bundles than other bundlers by eliminating unused code. It supports various module formats including CommonJS, AMD, ES2015, and UMD. While it is still evolving, Rollup.js aims to bundle code as efficiently as possible by removing dead code through tree-shaking and handling cyclic dependencies. It works best with ES2015 modules and requires a transpiler like Babel when using newer JavaScript features.
Rollup.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 : rollupplugincommonjs // 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
- 12. ConclusionConclusion Not yet production ready ... Bugs Npm ecosystem needs to evolve Handle only ES2015 modules et CommonJS It is the future