Rollup

A simple rollup configuration

Rollup is a JavaScript module bundler. Rollup looks at your JavaScript files and "bundles" them with the external libraries that they import. Rollup is also able to understand what parts of a library are not used (when used in a modular format). The new Modular JavaScript SDK is organized so that Rollup will exclude all parts you have not used.

Are you using a framework CLI too like Angular CLI, Vue CLI, or Create React App, or Next.js? Then you don't need to worry about any of this because they handle module bundling for you.

To get started with rollup first install the tool and a needed plugin.

npm i --save-dev rollup @rollup/plugin-node-resolve

The @rollup/plugin-node-resolve plugin tells Rollup to look into your node_modules folder to find the libraries you're importing.

Then create a file at the root of your project called rollup.config.js.

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
   // make sure this points to your entry point file
  input: 'src/index.js',
  output: {
    dir: 'public',
    // Outputs to a native module format. This has good browser compatibility
    // but does not support IE11. Use 'iife' or researach fallback script
    // loading for IE11 support.
    format: 'esm',
  },
  plugins: [nodeResolve()]
};

Then add this command to your "scripts" section of package.json.

"scripts": {
  "build:js": "rollup -c ./rollup.config.js"
}

Once that's added run the npm script from the command line.

npm run build:js

Then check the public/index.js for the JavaScript bundle.