rollup

What is rollup?

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It is optimized for bundling JavaScript files to use in a browser, and it is also capable of transforming code using plugins.

What are rollup's main functionalities?

Bundling Modules

Rollup can bundle multiple JavaScript modules into a single file. The above code demonstrates how to create a bundle from an entry point file 'src/main.js' and output it as an immediately-invoked function expression (IIFE) to 'bundle.js'.

import rollup from 'rollup';

async function build() {
  const bundle = await rollup.rollup({
    input: 'src/main.js'
  });

  await bundle.write({
    file: 'bundle.js',
    format: 'iife',
    name: 'MyModule'
  });
}

build();

Tree-shaking

Rollup includes a feature called 'tree-shaking' which removes unused code from the final bundle. This helps in reducing the size of the bundle and improving load times.

import { rollup } from 'rollup';

rollup({
  input: 'src/index.js',
  treeshake: true // Tree-shaking is enabled by default
}).then(bundle => {
  // Code to write the bundle
});

Plugin System

Rollup supports a wide range of plugins that can transform the code, add functionality, or integrate with other build tools. The code sample shows how to use the JSON plugin to import JSON files as modules.

import { rollup } from 'rollup';
import json from '@rollup/plugin-json';

rollup({
  input: 'src/index.js',
  plugins: [json()]
}).then(bundle => {
  // Code to write the bundle
});

Other packages similar to rollup

webpack

Webpack is a powerful module bundler that can handle not only JavaScript but also assets like images, fonts, and stylesheets. It has a larger ecosystem and more configuration options compared to Rollup, making it more suitable for complex applications.

parcel

Parcel is a web application bundler that offers a zero-configuration experience. It is known for its fast build times and out-of-the-box support for various file types. Parcel is easier to set up than Rollup and Webpack but may offer less fine-grained control.

browserify

Browserify allows you to use `require('modules')` in the browser by bundling up all of your dependencies. It is one of the earlier bundlers and is focused on simplicity and ease of use, but it doesn't have built-in tree-shaking like Rollup.

README

Rollup

I roll up, I roll up, I roll up, Shawty I roll up

I roll up, I roll up, I roll up –Wiz Khalifa

Quickstart

Rollup can be used via a JavaScript API or a Command Line Interface. Install with npm install -g rollup and run rollup --help to get started.

Dive into the wiki when you're ready to learn more about Rollup and ES6 modules.

A next-generation ES6 module bundler

When 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!)

The solution is to write your code as modules, and use a module bundler to concatenate everything into a single file. Browserify and Webpack are examples of module bundlers.

So far, so good, but there's a problem. When you include a library in your bundle...

var utils = require( 'utils' );

var query = 'Rollup';
utils.ajax( 'https://api.example.com?search=' + query ).then( handleResponse );

...you include the whole library, including lots of code you're not actually using.

ES6 modules solve this problem. Instead of importing the whole of utils, we can just import the ajax function we need:

import { ajax } from 'utils';

var query = 'Rollup';
ajax( 'https://api.example.com?search=' + query ).then( handleResponse );

Rollup statically analyses your code, and your dependencies, and includes the bare minimum in your bundle.

Shouldn't we be writing those utilities as small modules anyway?

Not always, no.

Don't minifiers already do this?

If you minify code with something like UglifyJS (and you should!) then some unused code will be removed:

(function () {
  function foo () {
    console.log( 'this function was included!' );
  }

  function bar () {
    console.log( 'this function was not' );
    baz();
  }

  function baz () {
    console.log( 'neither was this' );
  }

  foo();
})();

A 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.

But because of the limitations of static analysis, and the dynamic nature of JavaScript, it can't do the same thing with code like this:

(function () {
  var obj = {
    foo: function () {
      console.log( 'this method was included!' );
    },

    bar: function () {
      console.log( 'so was this :-(' );
      this.baz();
    },

    baz: function () {
      console.log( 'and this :-(' );
    }
  };

  obj.foo();
})();

Unfortunately, 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. That's only possible with ES6 modules.

What's the catch?

Most libraries that you depend on aren't written as ES6 modules, so Rollup can't work with them directly. (You can bundle your own app or library code with Rollup as a CommonJS module, then pass the result over to Webpack or Browserify, of course.)

You can help! It's possible to write libraries as ES6 modules while still making it easy for other developers to use your code as they already do, using the jsnext:main field in your package.json. 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.

See rollup-starter-project for inspiration on how to get started.

License

Released under the MIT license.

Changelog

0.16.4

• Fix import paths with . (#133)
• Prevent sourceMappingURL confusion leading to broken sourcemap
• Add code coverage reporting #130)
• Add modules property to user-facing bundle – an array with {id} objects (#128)