Skip to main content Accessibility Feedback

How to bundle ES modules with rollup.js

This week, we’ve been learning about ES modules.

In my article on import and export, I mentioned that native ES modules can create performance issues:

Using ES modules natively in the browser results in multiple HTTP requests, and creates the same performance issues that the CSS @import property does. In a future article, we’ll look at how to address this.

Well, friends, this is that future article!

Module bundlers

Rollup.js is a module bundler. It takes input files, and combines them into a single output file in one or more formats.

For example, in yesterday’s article on scoping with ES modules, we looked at a simple project with two files in it.

One of them, helpers.js, looked like this.

var answer = 42;

var getTheAnswer = function () {
	return answer;
};

export default getTheAnswer;

The other, index.js, imports content from helper.js and looked like this.

import getTheAnswer from './modules/helpers.js';

var name = 'Radagast';

alert('The answer is ' + getTheAnswer());

We can use a rollup.js to output a scripts.js file that imports all of the required files and functions and scopes them inside an IIFE, like this.

(function () {
	'use strict';

	var answer = 42;

	var getTheAnswer = function () {
		return answer;
	};

	alert('The answer is ' + getTheAnswer());

}());

This avoids the performance issues that multiple HTTP requests cause with native ES modules, and also lets you run your script in older browsers that don’t support ES modules.

Let’s look at how it works.

Installing rollup.js

Just a quick heads up: this will require the command line. I’ll try to make it as painless as possible.

Here’s some source code you can download to follow along with me.

To get started, you need to to have NodeJS installed on your computer. If you don’t yet, head over to the Node website and follow the instructions there.

Next, we need to add a package.json file to the project. I’ve got some dummy information in it. The most important part is the devDependencies object, with rollup as a dependency.

{
	"name": "rollup",
	"description": "a barebones module bundler boilerplate",
	"version": "1.0.0",
	"license": "MIT",
	"repository": {
		"type": "git",
		"url": "https://github.com/rollup/rollup"
	},
	"devDependencies": {
		"rollup": "^2.34.0"
	}
}

Next, open up your command line tool. On MacOS, it’s the terminal app.

Type cd, then the path to your project. On MacOS, you can drag-and-drop the folder into terminal to get the path, which is super handy. Hit enter.

cd ~/path/to/my/project

Now, we can install rollup.js itself. Type npm install, then hit the enter key. When it’s done, you should see a message like this.

added 2 packages from 6 contributors and audited 2 packages in 1.123s
found 0 vulnerabilities

With rollup.js installed, lets learn how to actually use it.

How to use rollup.js

If you wanted to you, you could run rollup.js entirely from command line. But, I personally find it a lot easier to create a configuration file.

Create a file named rollup.config.js. This is where we’ll tell rollup.js what files to bundle, and how to output them.

In our case, we’ll input the index.js file, and output it as a file named scripts.js. Any imports in index.js will also get pulled in automatically. We want to output our file as an iife.

export default {
	input: 'index.js',
	output: [
		{
			file: 'scripts.js',
			format: 'iife'
		}
	]
};

To run rollup.js, we can type rollup --config in the command line, then hit the enter key. The rollup keyword runs rollup.js, and the --config tells it to use our config file for all of the options and settings.

On bigger development projects, it’s helpful to create NPM commands to run common tasks.

Inside your package.json file, you can add a scripts object, with js (or build, or whatever other name you prefer). For its value, we’ll add our rollup --config command.

{
	"name": "rollup",
	"description": "a barebones module bundler boilerplate",
	"version": "1.0.0",
	"license": "MIT",
	"repository": {
		"type": "git",
		"url": "https://github.com/rollup/rollup"
	},
	"scripts": {
		"js": "rollup --config"
	},
	"devDependencies": {
		"rollup": "^2.34.0"
	}
}

Now, instead of typing rollup --config, you can type npm run js.

Using the output file

When you go to use the new scripts.js file, you can skip the type="module" property on your script element.

The bundled file isn’t a module. It’s a plain old traditional script build from ES modules using a module bundler.

You can download all of the code from today’s lesson on GitHub. For more advanced projects, you can checkout my full build tool boilerplate.