我爱分享网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 教程。
