概述
Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。ES6 模块可以使你*、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验。
创建第一个bundle(Creating your first bundle)
- 使用 Rollup 最简单的方法是通过 Command Line Interface (或 CLI)。先全局安装 Rollup (之后会介绍如何在项目中进行安装,更便于打包,但现在不用担心这个问题)。在命令行中输入以下内容:
npm install rollup --global # or `npm i rollup -g` for short
- 现在可以运行 rollup 命令了。试试吧~
rollup
我们来创建一个简单的项目:
- 首先,我们需要个 入口。将以下代码粘贴到新建的文件 src/main.js 中:
// src/main.js
import foo from './foo.js';
export default function () {
console.log(foo);
}
- 之后创建入口文件引用的 foo.js 模块:
// src/foo.js
export default 'hello world!';
- 现在可以创建 bundle 了:
rollup src/main.js -f cjs
cjs为common.js
4. -f 选项(--output.format 的缩写)指定了所创建 bundle 的类型——这里是 CommonJS(在 Node.js 中运行)。由于没有指定输出文件,所以会直接打印在 stdout 中:
'use strict';
var foo = 'hello world!';
var main = function () {
console.log(foo);
};
module.exports = main;
- 也可以像下面一样将 bundle 保存为文件:
rollup src/main.js -o bundle.js -f cjs
(你也可以用 rollup src/main.js -f cjs > bundle.js,但是我们之后会提到,这种方法在生成 sourcemap 时灵活性不高。)
- 试着运行下面的代码:
node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'
命令行
- 配置文件(Configuration files)
// rollup.config.js
export default {
// 核心选项
input, // 必须
external,
plugins,
// 额外选项
onwarn,
// danger zone
acorn,
context,
moduleContext,
legacy
output: { // 必须 (如果要输出多个,可以是一个数组)
// 核心选项
file, // 必须
format, // 必须
name,
globals,
// 额外选项
paths,
banner,
footer,
intro,
outro,
sourcemap,
sourcemapFile,
interop,
// 高危选项
exports,
amd,
indent
strict
},
};
- 你必须使用配置文件才能执行以下操作:
- 把一个项目打包,然后输出多个文件
- 使用Rollup插件, 例如 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 。这两个插件可以让你加载Node.js里面的CommonJS模块
- 命令行的参数(Command line flags)
-i, --input <filename> 要打包的文件(必须)
-o, --file <output> 输出的文件 (如果没有这个参数,则直接输出到控制台)
-f, --format <format> 输出的文件类型 (amd, cjs, esm, iife, umd)
-e, --external <ids> 将模块ID的逗号分隔列表排除
-g, --globals <pairs> 以`module ID:Global` 键值对的形式,用逗号分隔开
任何定义在这里模块ID定义添加到外部依赖
-n, --name <name> 生成UMD模块的名字
-h, --help 输出 help 信息
-m, --sourcemap 生成 sourcemap (`-m inline` for inline map)
-v/--version 打印已安装的Rollup版本号。
-w/--watch 监听源文件是否有改动,如果有改动,重新打包
--amd.id AMD模块的ID,默认是个匿名函数
--amd.define 使用Function来代替`define`
--no-strict 在生成的包中省略`"use strict";`
--no-conflict 对于UMD模块来说,给全局变量生成一个无冲突的方法
--intro 在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro 在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop 包含公共的模块(这个选项是默认添加的)
--silent 不要将警告打印到控制台。