Study Notes
Rollup
概述
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。
快速上手
安装 rollup
npm i rollup -D
示例
src/foo.js
const foo = () => {
console.log('hello rollup');
};
export { foo };
src/index.js
import { foo } from './foo';
foo();
对于浏览器
rollup ./src/index.js --file dist/bundle.js -f iife
对于Node.js
rollup ./src/index.js --file dist/bundle.js -f cjs
对于浏览器和Node.js
rollup ./src/index.js --file dist/bundle.js -f umd
Rollup 配置文件
rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
};
我们用 --config 或 -c 来使用配置文件：
rollup -c
插件(Plugins)
目前为止，我们通过相对路径，将一个入口文件和一个模块创建成了一个简单的 bundle。随着构建更复杂的 bundle，通常需要更大的灵活性——引入 npm 安装的模块、通过 Babel 编译代码、和 JSON 文件打交道等。
为此，我们可以用 插件(plugins) 在打包的关键过程中更改 Rollup 的行为。the Rollup wiki 维护了可用的插件列表。
| plugin | 描述 |
|---|---|
| @rollup/plugin-json | 将.json 文件转换为 ES6 模块，使 rollup 可以从 JSON 文件中读取数据 |
| @rollup/plugin-node-resolve | 告诉 Rollup 如何查找外部模块 |
| @rollup/plugin-commonjs | 用于将 CommonJS 模块转换为 ES6 |
RollupPluginJson
从 JSON 文件中读取数据
安装
npm i rollup-plugin-json -D
案例
rollup.config.js
import json from '@rollup/plugin-json';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [json()],
};
src/index.js
import { foo } from './foo';
import { version, name } from '../package.json';
foo();
console.log(version, name);
构建生成文件内容
(function () {
'use strict';
const foo = () => {
console.log('hello rollup');
};
var name = 'rollup-sample';
var version = '1.0.0';
foo();
console.log(version, name);
})();
我们实际需要的数据只有 name 和 version ， package.json 里的其它数据被忽略了。这是 tree-shaking 起了作用。
Options
compact
- Type: Boolean
- Default: false
如果为 true，则指示插件忽略缩进并生成最小的代码。
exclude
- Type: String | Array[…String]
- Default: null
用于指定插件应忽略的构建文件。 默认情况下，不会忽略任何文件
include
- Type: String | Array[…String]
- Default: null
用于指定插件需要被构建的文件。 默认情况下，所有文件。
indent
- Type: String
- Default: ‘\t’
指定生成的文件默认导出的缩进。
namedExports
- Type: Boolean
- Default: true
如果为 true，则指示插件为 JSON 对象的每个属性生成命名导出。
preferConst
- Type: Boolean
- Default: false
如果为 true，则指示插件使用 var 或 const 将属性声明为变量。 这与tree-shaking有关。
RollupPluginNodeResolve
告诉 Rollup 如何查找外部模块
安装
npm i @rollup/plugin-node-resolve -D
案例
rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [nodeResolve()],
};
src/index.js
import _ from 'lodash-es';
console.log(_.first([1, 2, 3]));
Options
RollupPluginCommonJS
用于将 CommonJS 模块转换为 ES6
安装
npm i @rollup/plugin-commonjs -D
案例
rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [commonjs()],
};
src/bar.js
module.exports = {
bar: 'foo',
};
src/index.js
import bar from './bar';
console.log(bar);
构建生成文件内容
(function () {
'use strict';
var bar = {
bar: 'foo',
};
console.log(bar);
})();
Options
代码拆分
UMD 和 IIFE 输出格式不支持代码拆分构建
生成多文件时，必须使用output.dir选项，而不是output.file。
动态导入(Dynamic Import)
动态导入lodash-es模块，来实现代码拆分
rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: 'src/index.js',
output: {
dir: 'dist',
format: 'amd', // 构建浏览器使用的文件
},
plugins: [nodeResolve()],
};
src/index.js
import('lodash-es').then((_) => {
console.log(_.first([1, 2, 3]));
});
浏览器使用 AMD
因为我们生成的是 AMD 格式 javascript 代码，它不能直接被浏览器使用，需要通过 require.js，来加载 AMD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script
data-main="./index.js"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
></script>
</head>
<body></body>
</html>
多入口打包
Rollup 多入口打包时，即使不使用动态导入，也会帮我们进行代码拆分
rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: ['src/index.js', 'src/hello.js'],
output: {
dir: 'dist',
format: 'amd', // 构建浏览器使用的文件
},
plugins: [nodeResolve()],
};
src/hello.js
import _ from 'lodash-es';
console.log(_.last([1, 2, 3]));
src/index.js
import _ from 'lodash-es';
console.log(_.first([1, 2, 3]));