跳至内容

简介

概述

Rollup 是一个 JavaScript 模块打包器,它将小的代码片段编译成更大的、更复杂的代码,例如库或应用程序。它使用 ES6 版本的 JavaScript 中包含的代码模块的新标准化格式,而不是以前的特殊解决方案,例如 CommonJS 和 AMD。ES 模块允许您自由无缝地组合来自您最喜欢的库的最有用的单个函数。这最终将在所有地方原生实现,但 Rollup 允许您今天就做到这一点。

安装

shell
npm install --global rollup

这将使 Rollup 作为全局命令行工具可用。您也可以将其安装在本地,请参阅 在本地安装 Rollup

快速入门

Rollup 可以通过 命令行界面(可选配置)或通过其 JavaScript API 使用。运行 rollup --help 以查看可用的选项和参数。

请参阅 rollup-starter-librollup-starter-app 以查看使用 Rollup 的示例库和应用程序项目。

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

对于浏览器

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

对于 Node.js

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

对于浏览器和 Node.js

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

为什么

如果您将项目分解成更小的独立部分,软件开发通常更容易,因为这通常会消除意外交互并显着降低您需要解决的问题的复杂性,并且仅仅从一开始就编写更小的项目 不一定是答案。不幸的是,JavaScript 在历史上没有将此功能作为语言的核心功能包含在内。

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

树摇

除了启用 ES 模块的使用之外,Rollup 还静态分析您正在导入的代码,并将排除任何未实际使用的代码。这使您能够在现有工具和模块之上构建,而无需添加额外的依赖项或增加项目的规模。

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

js
// 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 对象。

js
// 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 包含最少的代码,所以它会产生更轻、更快、更简单的库和应用程序。由于这种方法可以利用显式的 importexport 语句,因此它比仅仅运行自动缩小器来检测编译后的输出代码中未使用的变量更有效。

兼容性

导入 CommonJS

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

发布 ES 模块

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

在 MIT 许可下发布。