Rollup.js 教程
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何使用 Rollup.js 模块捆绑器。
Rollup 是一个 JavaScript 模块捆绑器。 它将较小的代码片段编译成较大的库或应用程序捆绑包。
Rollup 允许我们进行语法检查、源代码压缩和三元树摇动（删除不必要的代码）。此外，我们可以使用监视器进行持续更新，并以不同的格式生成捆绑包，例如 es、cjs 或 iife。
$ npm i -g rollup
我们全局安装 Rollup。
要使用 Rollup，我们有两个基本选项。我们可以使用带有可选配置文件（rollup.config.js）的 Rollup CLI，或者我们可以使用 JavaScript API。
还有其他捆绑器可供选择，例如 Webpack 或 Parcel。虽然这些是更通用的捆绑器，但 Rollup 主要关注 JavaScript 任务。
基本 CLI 命令
以下是一些基本的 Rollup CLI 命令。
$ rollup main.js -o bundle.js --f es
在这里，我们使用 Rollup CLI 在标准 es 格式中创建一个 bundle.js 文件。
$ rollup -c -o bundle.js
使用此命令，我们使用 rollup.config.js 文件创建一个捆绑包。
$ rollup --watch
使用 --watch 选项，我们持续构建。
Rollup.js 简单示例
我们从一个简单的示例开始。
export function hello() {
console.log('hello there!');
}
我们有 core.mjs 模块文件。 它导出一个 hello 函数。
import { hello } from "./core.mjs";
hello();
我们从 core.mjs 模块导入一个函数。
$ rollup main.js -f es
main.js → stdout...
function hello() {
console.log('hello there!');
}
hello();
我们生成 es 格式。 默认情况下，如果我们未指定输出，它将转到终端。
$ rollup main.js -f iife -o bundle.js main.js → bundle.js... created bundle.js in 21ms
我们以 iife 格式创建一个捆绑文件。
$ cat bundle.js
(function () {
'use strict';
function hello() {
console.log('hello there!');
}
hello();
})();
我们使用 cat 显示 bundle.js 文件的内容。
$ node build.js hello there!
我们运行该文件。
Rollup.js 配置文件示例
在下面的示例中，我们使用 rollup.config.js 生成一个捆绑包。
const fname = 'John';
const lname = 'Doe';
const occupation = 'gardener';
function say_message() {
console.log(`${fname} ${lname} is a ${occupation}`);
}
export {
fname as first_name,
lname as last_name,
say_message
}
在 core.mjs 模块中，我们导出了两个常量和一个函数。
import { first_name, last_name, say_message } from "./modules/core.mjs";
console.log(first_name);
console.log(last_name);
say_message();
在 main.js 文件中，我们使用导入的常量和函数。
export default {
input: 'src/main.js',
output: {
file: 'build/bundle.js',
format: 'es'
}
};
在配置文件中，我们定义输入文件、输出文件及其格式。
$ rollup -c src/main.js → build/bundle.js... created build/bundle.js in 12ms
我们调用 rollup 命令，该命令根据配置文件生成一个捆绑包。
$ cat build/bundle.js
const fname = 'John';
const lname = 'Doe';
const occupation = 'gardener';
function say_message() {
console.log(`${fname} ${lname} is a ${occupation}`);
}
console.log(fname);
console.log(lname);
这就是捆绑文件的样子。
$ node build/bundle.js John Doe John Doe is a gardener
Rollup.js 浏览器示例
在下一个示例中，我们为浏览器创建一个小捆绑包。 Rollup.js 还有一个插件系统，用于提供附加功能。
$ npm i rollup-plugin-terser --save-dev
我们安装 rollup-plugin-terser。这将压缩 JS 代码。
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<script type="module" src="../build/bundle.js"></script>
<style>
canvas {
border: 1px solid #bbb;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="450" height="450">
</canvas>
</body>
</html>
我们有一个 HTML 文件，我们在其中绘制在画布上。JS 代码是从位于构建目录中的捆绑文件中导入的。
export function draw_rectangles() {
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'brown';
ctx.fillRect(10, 10, 90, 60);
ctx.fillStyle = 'rgb(217, 146, 54)';
ctx.fillRect(130, 10, 90, 60);
ctx.fillStyle = '#3F79BA';
ctx.fillRect(250, 10, 90, 60);
}
在 core.mjs 模块中，我们定义了 draw_rectangles 函数，该函数在画布上绘制三个矩形。
import { draw_rectangles } from "./modules/core.mjs";
draw_rectangles();
在 main.js 文件中，我们导入并调用 draw_rectangles 函数。
import { terser } from "rollup-plugin-terser";
export default {
input: 'src/main.mjs',
output: {
file: 'build/bundle.js',
format: 'es'
},
plugins: [terser()]
};
在配置文件中，我们设置输入和输出文件并应用 terser 插件。
$ rollup -c src/main.mjs → build/bundle.js... created build/bundle.js in 124ms
我们生成捆绑文件。现在我们可以在浏览器中打开 index.html 文件。
$ cat build/bundle.js
!function(){let l=document.getElementById("myCanvas").getContext("2d");...
bundle.js 文件已压缩。
使用 Ramda.js 和 Rollup
接下来，我们将 Ramda 库与 Rollup 一起使用。 Ramda 是一个用于 Node.js 的函数式库。要使用 Node 库，我们使用 @rollup/plugin-node-resolve 插件。
$ npm i @rollup/plugin-node-resolve --save-dev $ npm i rollup-plugin-terser --save-dev
对于此示例，我们安装了 node resolve 和 terser 插件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="build/bundle.js"></script>
</head>
<body>
</body>
</html>
我们在 HTML 文件中使用最终的捆绑包。输出将显示在控制台中。
import * as R from 'ramda'; let nums = [2, 4, 6, 8, 10]; console.log(R.head(nums)); console.log(R.tail(nums)); console.log(R.init(nums)); console.log(R.last(nums));
我们在 main.js 文件中使用四个 ramda 函数。
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { terser } from "rollup-plugin-terser";
export default {
input: 'src/main.js',
output: {
file: 'build/bundle.js',
format: 'es'
},
plugins: [nodeResolve(), terser()]
};
在配置文件中，我们设置输入和输出文件，并应用 node resolve 和 terser 插件。
$ rollup -c
我们生成捆绑包。现在我们可以在浏览器中打开 HTML 文件，并检查浏览器控制台选项卡以获取输出。
在本文中，我们使用了 Rollup.js 模块捆绑器。