rollup

Rollup 是用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许自由无缝地组合最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持，但 Rollup 让你今天就可以开始这样做

Rollup 中文文档

bash

npm install --global rollup

快速开始

可以通过带有可选配置文件的命令行界面或 JavaScript API 来使用 Rollup。运行 rollup --help 以查看可用选项和参数

参见 rollup-starter-lib 和 rollup-starter-app，以查看使用 Rollup 的示例库和应用程序项目

这些命令假定应用程序入口点命名为 main.js，并且希望将所有导入编译到一个名为 bundle.js 的单个文件中

Tree-Shaking

除了可以使用 ES 模块之外，Rollup 还可以静态分析代码，并将排除任何实际上没有使用的内容。这使你可以在现有的工具和模块的基础上构建，而不需要添加额外的依赖项或使项目的大小变得臃肿

例如：使用 CommonJS 必须导入整个工具或库

javascript

// 使用 CommonJS 导入整个 utils 对象
const utils = require("./utils")
const query = "Rollup"
// 使用 utils 对象的 ajax 方法。
utils.ajax(`https://api.example.com?search=${query}`).then(handleResponse)

使用 ES 模块，不需要导入整个 utils 对象，而只需导入需要的一个 ajax 函数：

JavaScript

// 使用 ES6 的 import 语句导入 ajax 函数。
import { ajax } from './utils';
const query = 'Rollup';
// 调用 ajax 函数
ajax(`https://api.example.com?search=${query}`).then(handleResponse);

因为 Rollup 只包含最少的内容，因此它生成的库和应用程序更轻、更快、更简单。由于这种方法可以利用显式的 import 和 export 语句，因此它比仅运行最小化混淆工具更能有效检测出已编译输出代码中的未使用变量

兼容性

导入 CommonJS

Rollup 可以通过插件导入现有的 CommonJS 模块

发布 ES 模块

为确保你的 ES 模块可以立即被处理 CommonJS 的工具使用，例如 Node.js 和 webpack，可以使用 Rollup 编译成 UMD 或 CommonJS 格式，然后在 package.json 文件中使用 main 属性指向编译后的版本。如果你的 package.json 文件还有一个 module 字段，那么像 Rollup 和 webpack 2+ 这样的可感知 ES 模块的工具将直接导入 ES 模块版本

教程

简单案例

首先要全局安装 rollup 并创建项目

bash

npm install rollup --global

mkdir -p my-rollup-project/src
cd my-rollup-project

打包项目：

bash

# 没有指定输出文件，将会打印到 stdout：
rollup src/main.js -f cjs

# 保存到项目根目录
rollup src/main.js -o bundle.js -f cjs

# 或者
rollup src/main.js -f cjs > bundle.js

在项目根目录创建 test.js

JavaScript

var myBundle = require("./bundle.js")

myBundle()

补充命令：

bash

# 打包浏览器的库
npx rollup ./src/main.js -f iife -o dist/bundle.js

# 打包AMD的库
npx rollup ./src/main.js -f amd -o dist/bundle.js

# 打包CommonJS的库
npx rollup ./src/main.js -f cjs -o dist/bundle.js

# 打包通用的库（必须跟上name）
npx rollup ./src/main.js -f umd --name mathUtil -o dist/bundle.js

使用配置文件

在项目根目录中创建一个名为 rollup.config.mjs 的文件，并添加以下代码：

JavaScript

// rollup.config.mjs
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

使用命令打包：

bash

# 打包生成 bundle.js 文件
rollup -c

# 打包生成 bundle-2.js 文件
rollup -c -o bundle-2.js

也可以选择指定不同于默认的 rollup.config.mjs 的配置文件：

bash

rollup --config rollup.config.dev.mjs
rollup --config rollup.config.prod.mjs

本地安装 Rollup

在团队或分布式环境中工作时，推荐将 Rollup 添加为本地依赖

bash

npm install rollup --save-dev

pnpm install rollup -D

安装完成后, Rollup 可以在项目的根目录中运行：

bash

npx rollup --config

通常会在 package.json 中添加一个单一的构建脚本，为所有贡献者提供方便的命令。例如：

json

{
  "scripts": {
    "build": "rollup --config"
  }
}

使用插件

随着需要打包更复杂的代码，通常需要更灵活的配置，例如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。很棒的插件列表保存在 the Rollup Awesome List。

将使用 @rollup/plugin-json，它允许 Rollup 从 JSON 文件中导入数据

bash

pnpm install -D @rollup/plugin-json

修改其他文件：

JavaScript

// src/main.js
import foo from "./foo.js"
import { version } from "../package.json"

export default function () {
  console.log(foo)
  console.log("version " + version)
}

使用插件：

JavaScript

// rollup.config.mjs
import json from "@rollup/plugin-json"

export default {
  input: "src/main.js",
  output: {
    file: "bundle.js",
    format: "cjs"
  },
  plugins: [json()]
}

使用 npm run build 运行 Rollup。结果应该如下所示：

JavaScript

"use strict"

// src/foo.js
var foo = "hello world!"

var version = "1.0.0"

// src/main.js

function main() {
  console.log(foo)
  console.log("version " + version)
}

module.exports = main

使用输出插件

某些插件也可以专门应用于某些输出，这些插件只能在 Rollup 的主要分析完成后修改代码。如果使用不兼容的插件作为特定输出插件，Rollup 将会发出警告。一个可能的用例是压缩产物以在浏览器中使用

bash

pnpm install -D @rollup/plugin-terser

修改 rollup.config.mjs 文件，添加另一个最小化压缩的输出。选择 iife 作为格式。该格式会将代码封装起来，以便可以通过浏览器中的 script 标签使用，同时避免与其他代码产生不必要的交互。由于设置了一个导出，因此需要提供一个全局变量的名称，该变量将由我们的产物创建，以便其他代码可以通过此变量访问我们的导出

JavaScript

// rollup.config.mjs
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()]
};

除了 bundle.js，Rollup 现在还将创建第二个文件 bundle.min.js

配置选项

https://cn.rollupjs.org/configuration-options/