[TOC]
Rollup
Rollup 是一个 JS 模块打包工具，用 ES6 的格式来打包。
ES 模块带来的优势
- 是官方标准，是明确的未来发展方向
- CommonJS 是一种特殊的兼容格式，是临时解决方案
- ES 模块允许静态分析，可以辅助优化(如 Tree-shaking 和作用域提升)，并提供高级功能(如循环引用和实时绑定)
Tree-shaking
- ES 模块带来的优势。
- 即“保留有用代码”。在 Rollup 中使用，用于消除未使用的代码。
- 该名称源自模块的抽象语法树，和“标记-清除”垃圾收集算法类似。
Rollup 使用
命令行
对于浏览器，Rollup 可以打包成 ES6 模块。
1
2
| # iife 会将代码封装起来，以便给 script 标签使用
rollup main.js --file bundle.js --format iife
|
对于 Node.js，Rollup 可以打包成 CommonJS 格式。
1
| rollup main.js --file bundle.js --format cjs
|
对于浏览器和 Node.js，Rollup 可以打包成 UMD 格式。
1
2
| # umd 格式需要一个包名
rollup main.js --file bundle.js --format umd --name "myBundle"
|
配置文件
在根目录中的 rollup.config.mjs。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import json from "@rollup/plugin-json";
import terser from "@rollup/plugin-terser";
export default {
input: "src/main.js",
output: [
{
file: "bundle.js",
format: "cjs",
},
{
file: "bundle.min.js",
format: "iife",
name: "version",
plugins: [terser()],
},
],
plugins: [json()],
watch: {},
};
|
package.json 在 script 中添加"build": "rollup -c"。在 module 字段指定 ES6 模块入口，main 字段指定 CommonJS 或 UMD 模块入口。
插件
@rollup/plugin-node-resolve
找到外部模块。
@rollup/plugin-commonjs
将 CommonJS 转化为 ES6(ES2015)。
对等依赖(peer dependency)
把 lodash 作为外部导入的例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import resolve from "@rollup/plugin-node-resolve";
export default {
input: "src/main.js",
output: {
file: "bundle.js",
format: "cjs",
},
plugins: [
resolve({
moduleDirectories: ["node_modules"],
}),
],
external: ["lodash"],
};
|
Rollup 4
- Node 18。
- 面向浏览器的构建需要依赖一个 wasm 文件，需要将
@rollup/browser 添加到 optimizeDeps.exclude 中。
Rollup 和 Babel
使用 @rollup/plugin-babel 和 @rollup/plugin-node-resolve 插件。添加到 rollup.config.mjs：
1
2
3
4
5
6
7
8
9
10
11
| import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
export default {
input: "src/main.js",
output: {
file: "bundle.js",
format: "cjs",
},
plugins: [resolve(), babel({ babelHelpers: "bundled" })],
};
|
同时创建一个 src/.babelrc.json 文件：
1
2
3
| {
"presets": ["@babel/env"]
}
|
还需要安装 @babel/core 和 @babel/preset-env。
ES 模块语法
导入：
1
2
3
4
5
6
7
8
9
10
11
|
import { something } from "some-module";
import { something as somethingElse } from "another-module";
import * as all from "all-module";
import defaultExport from "default-export";
import "side-effect";
import("some-module").then(({ default: something, somethingElse }) => {});
|
导出：
1
2
3
4
5
6
7
8
9
|
const something = "something";
export { something };
export { something as somethingElse };
export const something = "something";
export function something() {}
export default something;
|
