介绍

• 概述
• 安装
• 快速开始
• 为什么
• 摇树优化
• 兼容性
  • 导入 CommonJS
  • 发布 ES 模块

概述

¥Overview

Rollup 是 JavaScript 的模块打包器，它将小段代码编译成更大、更复杂的东西，例如库或应用。它使用 JavaScript ES6 修订版中包含的新标准化代码模块格式，而不是以前的特殊解决方案，例如 CommonJS 和 AMD。ES 模块可让你自由、无缝地组合你最喜欢的库中最有用的单个函数。这最终将在任何地方都可以实现，但 Rollup 现在就可以让你做到这一点。

¥Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today.

安装

¥Installation

npm install --global rollup

这将使 Rollup 作为全局命令行工具可用。你也可以在本地安装，参见 在本地安装 Rollup。

¥This will make Rollup available as a global command line tool. You can also install it locally, see Installing Rollup locally.

快速开始

¥Quick Start

Rollup 可以通过具有可选配置文件的 命令行接口 或通过其 JavaScript API 使用。运行 rollup --help 以查看可用的选项和参数。

¥Rollup can be used either through a command line interface with an optional configuration file, or else through its JavaScript API. Run rollup --help to see the available options and parameters.

请参阅 rollup-starter-lib 和 rollup-starter-app 查看使用 Rollup 的示例库和应用项目

¥See rollup-starter-lib and rollup-starter-app to see example library and application projects using Rollup

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

¥These commands assume the entry point to your application is named main.js, and that you'd like all imports compiled into a single file named bundle.js.

对于浏览器：

¥For browsers:

# compile to a <script> containing a self-executing function ('iife')
rollup main.js --file bundle.js --format iife

对于 Node.js：

¥For Node.js:

# compile to a CommonJS module ('cjs')
rollup main.js --file bundle.js --format cjs

对于浏览器和 Node.js：

¥For both browsers and Node.js:

# UMD format requires a bundle name
rollup main.js --file bundle.js --format umd --name "myBundle"

为什么

¥The Why

如果你将项目分解为更小的单独部分，那么开发软件通常会更容易，因为这通常会消除意外的交互并显着降低你需要解决的问题的复杂性，并且首先只需编写较小的项目 不一定是最好的选择。不幸的是，JavaScript 历史上并未将此功能作为该语言的核心功能。

¥Developing software is usually easier if you break your project into smaller separate pieces, since that often removes unexpected interactions and dramatically reduces the complexity of the problems you'll need to solve, and simply writing smaller projects in the first place isn't necessarily the answer. Unfortunately, JavaScript has not historically included this capability as a core feature in the language.

这最终随着 JavaScript 的 ES6 修订版而改变，其中包括用于导入和导出函数和数据的语法，以便它们可以在单独的脚本之间共享。该规范现已修复，但仅在现代浏览器中实现，并未在 Node.js 中最终确定。Rollup 允许你使用新的模块系统编写代码，然后将其编译回现有支持的格式，例如 CommonJS 模块、AMD 模块和 IIFE 样式脚本。这意味着你可以编写面向未来的代码，并且你还可以获得的巨大好处。

¥This finally changed with the ES6 revision of JavaScript, which includes a syntax for importing and exporting functions and data so they can be shared between separate scripts. The specification is now fixed, but it is only implemented in modern browsers and not finalised in Node.js. Rollup allows you to write your code using the new module system, and will then compile it back down to existing supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts. This means that you get to write future-proof code, and you also get the tremendous benefits of…

摇树优化

¥Tree-Shaking

除了允许使用 ES 模块之外，Rollup 还会静态分析你正在导入的代码，并排除任何未实际使用的代码。这使你可以在现有工具和模块的基础上进行构建，而无需添加额外的依赖或扩大项目的大小。

¥In addition to enabling the use of ES modules, Rollup also statically analyzes the code you are importing, and will exclude anything that isn't actually used. This allows you to build on top of existing tools and modules without adding extra dependencies or bloating the size of your project.

例如，对于 CommonJS，必须导入整个工具或库。

¥For example, with CommonJS, the entire tool or library must be imported.

// import the entire utils object with CommonJS
const utils = require('./utils');
const query = 'Rollup';
// use the ajax method of the utils object
utils.ajax(`https://api.example.com?search=${query}`).then(handleResponse);

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

¥With ES modules, instead of importing the whole utils object, we can just import the one ajax function we need:

// import the ajax function with an ES6 import statement
import { ajax } from './utils';
const query = 'Rollup';
// call the ajax function
ajax(`https://api.example.com?search=${query}`).then(handleResponse);

由于 Rollup 包含最低限度的内容，因此它会产生更轻、更快且不太复杂的库和应用。由于这种方法可以利用显式的 import 和 export 语句，因此它比简单地运行自动压缩器来检测编译的输出代码中未使用的变量更有效。

¥Because Rollup includes the bare minimum, it results in lighter, faster, and less complicated libraries and applications. Since this approach can utilise explicit import and export statements, it is more effective than simply running an automated minifier to detect unused variables in the compiled output code.

兼容性

¥Compatibility

导入 CommonJS

¥Importing CommonJS

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

¥Rollup can import existing CommonJS modules through a plugin.

发布 ES 模块

¥Publishing ES Modules

为了确保你的 ES 模块可以立即被支持 CommonJS 的工具（例如 Node.js 和 webpack）使用，你可以使用 Rollup 编译为 UMD 或 CommonJS 格式，然后在 package.json 文件中使用 main 属性指向该编译版本 。如果你的 package.json 文件也有 module 字段，ES 模块感知工具（例如 Rollup 和 Webpack 2+）将直接 导入 ES 模块版本。

¥To make sure your ES modules are immediately usable by tools that work with CommonJS such as Node.js and webpack, you can use Rollup to compile to UMD or CommonJS format, and then point to that compiled version with the main property in your package.json file. If your package.json file also has a module field, ES-module-aware tools like Rollup and webpack 2+ will import the ES module version directly.