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#

 

Loading...

Start a new discussion. All notification go to the author.

Loading...