Automating a React Library's Build Process with RollupJS and Babel

 in recent years has led to the increased publication of well-documented, robust libraries. TypeScript boosts developer productivity and lessens the likelihood of bugs (and typos) by embracing static code analysis and feeding suggestions to code completion engines, but at the cost of additional bloat (from type annotations and syntactic sugar) and tooling requirements. Although TypeScript is a superset of JavaScript, web browsers and runtimes, such as Node.js, cannot execute TypeScript code. Furthermore, applications written in JavaScript cannot import TypeScript libraries as modules. If you choose to write a library in TypeScript, then you need to identify the library's target audience:

Depending on the configuration of your library's build process, the library's module bundler can output compiled versions of the library that address these scenarios. For example, if a developer has written their application using the module format 

, then they can import the ES module version of the library (outputted into a 

 file by the module bundler) at the top of the application's source code via an 

Since ES modules was released several years ago as part of the ES6 standard, the JavaScript language had no native implementation for importing/exporting modules prior to the ES6 standard. With older module formats, such as CommonJS and UMD, still actively used by some codebases, you may want to specify these formats as outputs of the library's module bundler to maximize the library's usage and adoption by other developers. 

Commonly, a library's build process involves the 

 JavaScript compiler convert code written with the latest features of JavaScript (and/or non-standard syntaxes, such as TypeScript and JSX) into efficient "

." Babel compiles the code while RollupJS generates a distributable (within a 

 folder) for each module format you decide to support. For example, the library may have one distributable for CommonJS (a 

 file). Regardless of the module format, these distributables are capable of running on older JavaScript engines.

Ideally, anytime you make changes to your library and push those changes to its remote repository, those changes should trigger an automated workflow to rebuild the distributables and bump its version accordingly. Updating distributables this way allows developers to quickly receive the latest copies of your library.

Below, I'm going to show you how to automate a React library's build process using RollupJS and Babel.

To get started, clone the following repository:

$ git clone -b library https://github.com/newline-sandbox/react-d3-charts.git

This repository contains a component library with customizable D3 visualizations written in React and TypeScript. Currently, this repository only has one visualization component, a scatterplot.

Inside of the project directory, install the dependencies:

For this tutorial, we will be adding RollupJS and Babel to this library.

Browsers and certain environments cannot run TypeScript and JSX code. Therefore, we must install Babel to compile this code into JavaScript code that can run on these technologies. Plus, you may need to transform newer JavaScript features (ES2015+), such as arrow functions or 

, if you decide to target older browsers, such as Internet Explorer. 

$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime
$ npm install --save @babel/runtime

: A plugin applies a single transformation to the code, whereas a preset is a collection of plugins. 

, list the installed presets and plugins. For this library, let's target browsers with more than 0.2% market share and are not considered "dead." 

 are queries used to filter for the target browsers. 

To check out the list of browsers that fall under these 

$ npx browserslist ">0.2%, not dead, not op_mini all"

Before installing RollupJS, the library must provide an 

, which tells RollupJS where to start building the bundle. RollupJS crawls the library's modules to create a module dependency graph based on its imports/exports. From there, RollupJS uses this graph to drop any unused dependencies (known as tree-shaking) and generate the bundle using the finalized graph and an object of output options. The entry point serves as the root node of the graph and determines which modules will end up in the bundled output. 

, which exports each React component (along with their prop interfaces) via aggregate exports.

export * from "./components/Scatterplot";

All components exported within this module are publicly available to be consumed by applications importing it.

$ npm install --save-dev rollup rollup-plugin-delete rollup-plugin-node-externals @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve

Within the root of the project directory, create a 

Commonly, RollupJS configurations involve three options:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import externals from "rollup-plugin-node-externals";
import del from "rollup-plugin-delete";
import pkg from "./package.json";

export default [
  {
    input: "./src/index.ts",
    plugins: [
      // Delete existing build files.
      del({ targets: "dist/*" }),
      // Leave out third-party dependencies (listed under `package.json`'s `dependencies` option) from the bundled outputs. For example, this library hosts components written with React. We can assume that developers using this library will already have React imported in their applications. And so, why include React in the bundled output and add unnecessary bloat?
      externals({ deps: true }),
      // Find third-party modules within `node_modules` with any one of the following file extensions: `.js`, `.ts` and `.tsx`.
      nodeResolve({
        extensions: [".js", ".ts", ".tsx"],
      }),
      // Convert CommonJS modules into ES modules.
      commonjs(),
      // Compile the library's code into a format that is consumable by a wider set of browsers. The library's code lives inside `.js`, `.jsx`, `.ts` and `.tsx` files. Do not compile any files from `node_modules`. The `runtime` helper makes Babel's injected helper code reusable for all modules, which greatly reduces bundle size.
      babel({
        babelHelpers: "runtime",
        exclude: "**/node_modules/**",
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      }),
    ],
    output: [
      { file: pkg.main, format: "cjs" },
      { file: pkg.module, format: "es" },
    ],
  },
];

For our library, we will output two bundles: one for CommonJS and one for ES modules. Since the 

 option of the RollupJS configuration references file paths from 

 file with these paths, which tell RollupJS where to place the build output.

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "sideEffects": false
}

 reassures a module bundler that unused modules do not have "side-effects," and thus, they can be safely removed from the module dependency graph. Essentially, this option grants the module bundler permission to tree-shake.

{
  "scripts": {
    "build": "npm run build:js",
    "build:js": "rollup -c rollup.config.js"
  }
}

Finally, run the following command to build the library:

 files. Notice that in both files, all instances of 

, JSX code has been replaced with calls to 

For a final version of this tutorial, check out the GitHub repository 

Add a build process to your React library! 

AUTHOR

Ken Chan

The meteoric adoption of TypeScript in recent years has led to the increased publication of well-documented, robust libraries. TypeScript boosts developer productivity and lessens the likelihood of bugs (and typos) by embracing static code analysis and feeding suggestions to code completion…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Automating a React Library's Build Process with RollupJS and Babel

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript