37 lines
3 KiB
Markdown
37 lines
3 KiB
Markdown
# Code-Splitting for Libraries—bundling for NPM With Rollup 1.0
|
|
|
|
|
|
|
|
## Metadata
|
|
- Author: [[Lukas Taegert]]
|
|
- Full Title: Code-Splitting for Libraries—bundling for NPM With Rollup 1.0
|
|
- Category: #articles
|
|
- Document Tags: [[dev]] [[dev/javascript]]
|
|
- URL: https://levelup.gitconnected.com/code-splitting-for-libraries-bundling-for-npm-with-rollup-1-0-2522c7437697
|
|
- Archive: https://web-archive.alecodes.page/bookmarks?bf=1&search=&title=Code-Splitting%20for%20Libraries%E2%80%94bundling%20for%20NPM%20With%20Rollup%201.0
|
|
> [!tldr]
|
|
> Rollup 1.0 introduces code-splitting as a key feature for bundling JavaScript libraries. The article explains how to create an efficient library called "fancy-case" that allows users to import specific utility functions while offering multiple formats for different environments. It highlights the benefits of using ES modules and provides guidance on configuring Rollup for optimal performance.
|
|
|
|
## Highlights
|
|
CommonJS module for Node
|
|
This is probably the most important target. This allows Node users and legacy bundlers to import your library as a [CommonJS module](http://wiki.commonjs.org/wiki/Modules/1.1.1) via [View Highlight](https://read.readwise.io/read/01j864mhazhr25k1zh6ngzn2x8))
|
|
|
|
Single bundle to be used in a script tag
|
|
The “traditional way” of distributing JavaScript may still be interesting for small, hand-crafted sites with minimal setup. The bundle creates a global variable via which its exports can be accessed. [View Highlight](https://read.readwise.io/read/01j864mcsdtwp63pehyqf3cex6))
|
|
|
|
AMD module to be used with an AMD loader
|
|
There are still quite a few [AMD/RequireJS](https://requirejs.org/) based projects out there. We can distribute a file that can itself be used as a dependency of an AMD module. [View Highlight](https://read.readwise.io/read/01j864mvbta1gpk2n5rptm0m5z))
|
|
|
|
ES module for modern bundlers
|
|
[ECMAScript modules](http://exploringjs.com/es6/ch_modules.html) are now the official, standardized JavaScript module format. [View Highlight](https://read.readwise.io/read/01j864n23372ch1nkz5xrxwqp2))
|
|
|
|
Direct imports for CJS or ESM consumers
|
|
An emerging new pattern especially for libraries with many independent utility functions is to allow users to import independent parts of the library from separate files. Node users could write
|
|
const upper = require(**'fancy-case/cjs/upper'**);
|
|
console.log(upper('some Text'));
|
|
while ESM consumers could write
|
|
import upper from **'fancy-case/esm/upper'**;
|
|
console.log(upper('some Text')); [View Highlight](https://read.readwise.io/read/01j864p33y06v43pdzwxrgksxg))
|
|
|
|
Rollup supports a special output format called a [“Universal Module Definition”](https://github.com/umdjs/umd), which simultaneously supports the CJS, script tag, and ESM use cases. To create it, add a new file called `rollup.config.js` to the root of your project [View Highlight](https://read.readwise.io/read/01j864rhxg10v4kb7fnf2a869x))
|
|
|