Rollup is a bundler similar to webpack that we use to create CommonJS bundles for each npm package. This allows us to create a hybrid npm package - one that supports both ESM and CommonJS formats.
We are using Rollup to transform our ESM (EcmaScript Module) output that the tsc build produces. It takes the /dist/dist-esm/index.js produced by tsc and transforms and flattens the output to a single /dist/dist-cjs/index.js CommonJS module file.
Rollup is run as part of each packages build step.
For some background context there are three main module formats: ESM (EcmaScript Modules), CommonJS and AMD (Asynchronous Module Definition). UMD is a universal way of supporting both CommonJS and AMD (but not ESM).
CommonJS and AMD both need the require syntax, e.g.,
// Example CommonJS/AMD module import syntax
const pkg = require("pkg");
pkg.function1();ESM uses the import ... from ... syntax and has a number of advantages such as better treeshaking.
// Example ESM module import syntax
import { function1, function2 } from "pkg";
function1();ESM is relatively new and is slowly being adopted as the standard. It is supported in all major browsers (except IE) and in Node v13.2.0+ (view support here).
However, to support Node versions < v.13.2.0 (for unit testing) and enable consumers of the package to make a choice for what they wish to support we have decided to support both ESM and CommonJS. At the time of writing we do not support AMD/UMD.
The configuration file for rollup can be found under each project root and is called rollup.config.js. E.g., packages/react-components/rollup.config.js.