UNPKG

6.26 kBMarkdownView Raw
1# Rollup
2
3<p align="center">
4 <a href="https://travis-ci.org/rollup/rollup">
5 <img src="https://api.travis-ci.org/rollup/rollup.svg?branch=master"
6 alt="build status">
7 </a>
8 <a href="https://npmjs.org/package/rollup">
9 <img src="https://img.shields.io/npm/v/rollup.svg"
10 alt="npm version">
11 </a>
12 <a href="https://github.com/rollup/rollup/blob/master/LICENSE.md">
13 <img src="https://img.shields.io/npm/l/rollup.svg"
14 alt="license">
15 </a>
16 <a href="https://david-dm.org/rollup/rollup">
17 <img src="https://david-dm.org/rollup/rollup.svg"
18 alt="dependency status">
19 </a>
20 <a href="http://codecov.io/github/rollup/rollup?branch=master">
21 <img src="http://codecov.io/github/rollup/rollup/coverage.svg?branch=master" alt="Coverage via Codecov" />
22 </a>
23 <a href='https://gitter.im/rollup/rollup?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge'>
24 <img src='https://badges.gitter.im/rollup/rollup.svg'
25 alt='Join the chat at https://gitter.im/rollup/rollup'>
26 </a>
27</p>
28
29> *I roll up, I roll up, I roll up, Shawty I roll up*
30>
31> *I roll up, I roll up, I roll up*
32> &ndash;[Wiz Khalifa](https://www.youtube.com/watch?v=UhQz-0QVmQ0)
33
34
35## Quickstart
36
37Rollup can be used via a [JavaScript API](https://github.com/rollup/rollup/wiki/JavaScript-API) or a [Command Line Interface](https://github.com/rollup/rollup/wiki/Command-Line-Interface). Install with `npm install -g rollup` and run `rollup --help` to get started.
38
39[Dive into the wiki](https://github.com/rollup/rollup/wiki) when you're ready to learn more about Rollup and ES6 modules.
40
41
42## A next-generation ES6 module bundler
43
44When you're developing software, it's much easier to break your library or application apart into separate pieces that you can work on separately. It's also very likely that you'll have dependencies on third party libraries. The result is lots of small files – but that's bad news for browsers, which get slowed down by having to make many requests. (It's also [bad news for Node!](https://kev.inburke.com/kevin/node-require-is-dog-slow/))
45
46The solution is to write your code as **modules**, and use a **module bundler** to concatenate everything into a single file. [Browserify](http://browserify.org/) and [Webpack](http://webpack.github.io/) are examples of module bundlers.
47
48So far, so good, **but there's a problem**. When you include a library in your bundle...
49
50```js
51var utils = require( 'utils' );
52
53var query = 'Rollup';
54utils.ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
55```
56
57...you include the *whole* library, including lots of code you're not actually using.
58
59**ES6 modules solve this problem.** Instead of importing the whole of `utils`, we can just import the `ajax` function we need:
60
61```js
62import { ajax } from 'utils';
63
64var query = 'Rollup';
65ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
66```
67
68Rollup statically analyses your code, and your dependencies, and includes the bare minimum in your bundle.
69
70
71## Shouldn't we be writing those utilities as small modules anyway?
72
73[Not always, no.](https://medium.com/@Rich_Harris/small-modules-it-s-not-quite-that-simple-3ca532d65de4)
74
75
76## Don't minifiers already do this?
77
78If you minify code with something like [UglifyJS](https://github.com/mishoo/UglifyJS2) (and you should!) then some unused code will be removed:
79
80```js
81(function () {
82 function foo () {
83 console.log( 'this function was included!' );
84 }
85
86 function bar () {
87 console.log( 'this function was not' );
88 baz();
89 }
90
91 function baz () {
92 console.log( 'neither was this' );
93 }
94
95 foo();
96})();
97```
98
99A minifier can detect that `foo` gets called, but that `bar` doesn't. When we remove `bar`, it turns out that we can also remove `baz`.
100
101But because of the limitations of static analysis, and the dynamic nature of JavaScript, it can't do the same thing with code like this:
102
103```js
104(function () {
105 var obj = {
106 foo: function () {
107 console.log( 'this method was included!' );
108 },
109
110 bar: function () {
111 console.log( 'so was this :-(' );
112 this.baz();
113 },
114
115 baz: function () {
116 console.log( 'and this :-(' );
117 }
118 };
119
120 obj.foo();
121})();
122```
123
124Unfortunately, **traditional modules – CommonJS and AMD – result in code more like the second example than the first, making them next-to-impossible to optimise**. Rather than *excluding dead code*, we should be *including live code* (aka 'tree-shaking'). That's only possible with ES6 modules.
125
126
127## Can I use it with my non-ES6 dependencies?
128
129[Yes!](https://github.com/rollup/rollup/wiki/Bundling-CommonJS-modules) Rollup can't work its tree-shaking magic on CommonJS modules, but it can convert them to ES6 via [plugins](https://github.com/rollup/rollup/wiki/Plugins).
130
131
132## Can I distribute my package as an ES6 module?
133
134If your `package.json` has a `jsnext:main` field, ES6-aware tools like Rollup can import the ES6 version of the package instead of the legacy CommonJS or UMD version. You'll be writing your code in a more future-proof way, and helping to bring an end to the [dark days of JavaScript package management](https://medium.com/@trek/last-week-i-had-a-small-meltdown-on-twitter-about-npms-future-plans-around-front-end-packaging-b424dd8d367a). [Learn more here.](https://github.com/rollup/rollup/wiki/jsnext:main)
135
136See [rollup-starter-project](https://github.com/eventualbuddha/rollup-starter-project) for inspiration on how to get started.
137
138
139## How does this compare to JSPM/SystemJS?
140
141[JSPM](http://jspm.io/) is awesome! It's a little different to this project though – it combines a repository with a package manager and a client-side module loader, as opposed to simply bundling modules. JSPM allows you to use any module format and even develop without a build step, so it's a great choice for creating applications. Rollup generates smaller bundles that don't use the complex SystemJS format, and so is a better choice for creating libraries. A future version of JSPM [may use Rollup internally](https://github.com/systemjs/builder/pull/205), so you'll get the best of both worlds.
142
143
144## License
145
146Released under the [MIT license](https://github.com/rollup/rollup/blob/master/LICENSE.md).