Rollup Cheat Sheet

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 uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

This is a basic guide to help you get started with rollup.js. A summary of the more detailed post How To Setup Rollup Config with some modifications and additions.

Initial Setup

Step 1

Run the following npm command:

npm install rollup --save-dev

Step 2

Create a rollup.config.js file within the application root folder. Change the input and output to fit your needs.

export default {
    input: './src/main.js', // entry point
    output: {
        file: './build/bundle.min.js', // output bundle file
        format: 'cjs'
    }
}

Step 3

Open your package.json and add the following script:

...

"scripts": {
    "build": "rollup -c"
}

...

Step 4

Test your setup by running the script you've created.

npm run build

CSS

Step 1

Install the required plugin.

npm install rollup-plugin-postcss --save-dev

Step 2

Update the rollup.config.js file.

import postcss from 'rollup-plugin-postcss';

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'cjs'
    },
    plugins: [
        postcss({
          extensions: ['.css']
        })
    ]
}

Babel

Step 1

Install the required packages.

npm install @babel/core @babel/preset-env rollup-plugin-babel --save-dev

Step 2

Create a file called .babelrc within the application root and place the following content inside.

{
  "presets": [
      "@babel/env"
  ]
}

Step 3

Update the rollup.config.js file.

import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'cjs'
    },
    plugins: [
        postcss({
          extensions: ['.css']
        }),
        babel({
            exclude: 'node_modules/**'
        })
    ]
}

non-ES modules

Step 1

Install the required packages.

npm install rollup-plugin-node-resolve rollup-plugin-commonjs --save-dev

Step 2

Update the rollup.config.js file.

import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: './src/main.js',
  output: {
    file: './build/bundle.min.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      extensions: ['.css']
    }),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs()
  ]
}

Compression

Step 1

Install the required packages.

npm install rollup-plugin-uglify --save-dev

Step 2

Update the rollup.config.js file.

import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { uglify } from 'rollup-plugin-uglify';

export default {
  input: './src/main.js',
  output: {
    file: './build/bundle.min.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      extensions: ['.css']
    }),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    uglify()
  ]
}

Now your app is ready and able to handle .js and .css imports. Run the build command to test it.

npm run build

Extras

Multiple Outputs

export default [
    {
        input: 'src/main.js',
        output: {
            file: __dirname + '/src/main.js', // __dirname is the root directory retrieved by using the Node.js file system API
            format: 'cjs'
        }
    },
    {
        input: 'src/another.js',
        output: {
              file: __dirname + '/build/another.js', // __dirname is the root directory retrieved by using the Node.js file system API
              format: 'cjs'
        }
    }
]

Globals

It's not uncommon that your bundle depends on external modules. For example, you might want to use lodash. In that case, a rollup.config.js needs to be configured with globals and external options.

...
// imports

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'cjs',
        globals: {
            'lodash': '_',
        }
    },
    plugins: [/* */],
    external: ['lodash']
}