Introduction to module bundling
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
andmodule.exports
ESModules (ES)
The official specification for a standard module system
Can work in server and modern browser environments
import
andexport
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...