The build process for a library has many similarities with applications. We want to take a single entry point, which contains our components, and bundle them together into an output file. When building applications, the target environment is a web browser. Webpack is a popular module bundler that helps bundle a wide variety of assets into an output that browsers can understand.

For libraries the target environment is often another development environment, not a browser. This changes the type of assets we can produce and the tools required to build them. In this course we will be using RollupJS as our module bundler.

Module formats#

Originally, there was no open standard for importing/exporting JavaScript modules. Over time there have been many formats developed which realize this, each with their own unique benefits. Some common formats include:

• CommonJS (CJS)

  • The module system that Node.js has used historically

  • Server-side only

  • require and module.exports

• ESModules (ES)

  • The official specification for a standard module system

  • Can work in server and modern browser environments

  • import and export

  • Supports tree-shaking

    • Tree-shaking allows modern bundlers, like Webpack and RollupJS, to remove JavaScript that isn't required for your application to run.

• Universal Module Definition (UMD)

  • Allows many different module formats to interact with your library

  • Can work in server and browser environments

  • Unable to tree-shake

Multi-distribution packages#