Rollup: CommonJS to UMD

remarkablemark
Nov 4, 2020 · 3 min read
rollup.js logo
rollup.js logo
rollup.js

Whereas Webpack is great for building apps, Rollup is great for building libraries.

Rollup supports ES modules out of the box. However, to support CommonJS, the following plugins are required:

Prerequisites

Setup

$ npm install rollup
$ npx rollup --version
rollup v2.32.1

Create the entry file index.js:

$ echo "export default 'Hello, world!'" > index.js

Initialize package.json:

$ npm init --yes

Add the build script to package.json:

The script compiles index.js to dist/bundle.js.

Run the build script:

$ npm run build

To find that you got the error:

Error: You must specify "output.format", which can be one of "amd", "cjs", "system", "esm", "iife" or "umd".

Output Format

To generate a UMD bundle with MyModuleName as the export name:

$ npx rollup index.js --file dist/bundle.js --format umd --name 'MyModuleName'

Load with script

Load with AMD

Load with CommonJS

$ node
> const MyModuleName = require('./dist/bundle');
> console.log(MyModuleName);
Hello, world!

Config File

Create the file rollup.config.js:

$ touch rollup.config.js

Add the config:

Update the build script in package.json to use the config file:

To give the config file a name other than the default, you’ll need to specify the custom file location:

$ npx rollup --config my.config.js

CommonJS

$ npm install @rollup/plugin-commonjs

Add the plugin to the rollup config:

Now refactor index.js:

After rebuilding the bundle, loading it with script, AMD, or CommonJS should continue to work:

$ npm run build
$ open script.html
$ open amd.html
$ node -p "require('./dist/bundle')"
Hello, world!

Node Resolve

$ npm install lodash

In order for rollup to locate 3rd party modules in node_modules, you need to install @rollup/plugin-node-resolve:

$ npm install @rollup/plugin-node-resolve

Add the plugin to the rollup config:

Build the bundle to verify it still works:

$ npm run build
$ node -p "require('./dist/bundle')"
Hello, world!

If you want the module resolution to respect the “browser” field in package.json, you can set the option resolve({ browser: true }).

Terser

Install rollup-plugin-terser:

$ npm install rollup-plugin-terser

Add the plugin to the rollup config:

Use an environment variable to determine whether you want to build a minified or unminified bundle:

Set the environment variable before you run the build command:

$ NODE_ENV=production npm run build

Alternatively, this can be done in the package.json build script:

Uglify

Install rollup-plugin-uglify:

$ npm install rollup-plugin-uglify

Add the plugin to the rollup config:

Now you can build an uglified bundle:

$ npm run build
$ node -p "require('./dist/bundle')"
Hello, world!

Resources

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store