Rollup.js 教程展示了如何使用 Rollup.js 模块打包器。
Rollup 是一个 JavaScript 模块打包器。它将较小的代码片段编译成较大的库或应用程序包。
Rollup 允许我们进行语法检查、源代码缩小和 threesaking(删除不必要的代码)。此外,我们可以使用观察器进行持续更新,并生成不同格式的包,如 es、cjs、oriife。
$ 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(); })();
我们用bundle.js
显示cat
文件的内容。
$ 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
函数,在canvas上绘制三个矩形。
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
文件已缩小。
在 Rollup 中使用 Ramda.js
接下来,我们将使用带有 Rollup 的 Ramda 库。 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()] };
在配置文件中,我们设置输入和输出文件并应用节点解析和简洁插件。
$ rollup -c
我们生成包。现在我们可以在浏览器中打开 HTML 文件并检查浏览器控制台选项卡的输出。
在本文中,我们使用了 Rollup.js 模块打包器。
列出所有 JavaScript 教程。