The Best Ways to Bundle React Modules Into Packages
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:10] 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.
[00:11 - 00:22] When bundling 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.
[00:23 - 00:32] 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.
[00:33 - 00:41] In this course, we will be using RULP JS as our module bundler. Originally, there was no open standard for importing and exporting JavaScript modules.
[00:42 - 00:52] Over time, there have been many formats developed which realize this, each with their own unique benefits. Some common formats include Common JS, which is the module system that Node.js has used historically.
[00:53 - 01:06] It's server-side-only, and you'll recognize it with the require and module.ex ports syntax. The next is ES modules, which is the official specification for a standard module system.
[01:07 - 01:26] This is able to work in both server and modern browser environments, and you'll recognize it with import and export syntax. One of the key things with ES modules is that it supports tree-shaking, and tree-shaking allows module bundlers like Webpack and RULP JS, to remove JavaScript that isn't required for your application to run.
[01:27 - 01:42] The other format is Universal Module Definition, or UMD, which allows many different module formats to interact with your library. This is able to work in a server and browser environment, but it's unable to be tree-shaken.
[01:43 - 01:51] When we build our library, we don't have to choose a single module format. We can provide several formats and reference them with unique entry points in our package.json.
[01:52 - 02:02] Some popular entry points include main, module, and browser. Modern bundlers are able to look at the entry points to determine which format to consume.
[02:03 - 02:16] In this course, we're only going to be providing the main and module entry points for Common JS and ES module distributions. Module bundling is important, but we still need to produce JavaScript in a format that browsers can understand.
[02:17 - 02:27] Depending on your minimum browser requirements, some modern JavaScript features may not be available. Babel is a tool that can help transpile our code into a format that older browsers can understand.
[02:28 - 02:38] Babel also allows other tools and libraries to create presets that improve our code. Babel preset React, for example, ensures that our JSX syntax is handled correctly.
[02:39 - 02:49] We will also be using the Style Components Babel plugin to improve our CSS and JS usages in production. We will be using Babel in combination with Rollup to bundle our application.
[02:50 - 02:54] In the upcoming lesson, we will be adding a similar build process to our component library.