简介

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用ESM。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

Webpack 的理念是“万物皆是模块”，rollup.js 从一开始，就没有那样宏大的愿景，它描述自己是：“一个 JavaScript 模块打包器”。致力于“将小块的代码编译成大的复杂的代码”。

快速使用

Rollup 可以通过命令行接口(command line interface)配合可选配置文件(optional configuration file)来调用，或者可以通过 JavaScript API来调用。运行 rollup --help 可以查看可用的选项和参数。

安装：

npm install -g rollup

命令行使用方式：

假设应用程序入口起点的名称为 main.js，并且所有 import 的依赖(all imports)都编译到一个名为 bundle.js 的单个文件中。

生成浏览器格式（IIFE 立即调用的函数表达式）：

rollup main.js --file bundle.js --format iife

生成 Node.js CommonJS module ('cjs'):

rollup main.js --file bundle.js --format cjs

生成JS通用模块模式 UMD

rollup main.js --file bundle.js --format umd --name "myBundle"

配置文件使用方式

其次我们创建一个入口并写入如下代码：

// ./src/main.js
import hello from './src/hello.js';
hello();

// ./src/hello.js
export default function(name){ 
  console.log(name) 
};

基本代码准备好了之后，我们写rollup的配置文件(rollup.config.js在根目录下)：

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

这样，我们在终端执行，这样就生成了一个bundle.js，就是我们想要的打包后的文件。

rollup -c

JavaScript API 的使用方式

Rollup 提供 JavaScript 接口那样可以通过 Node.js 来使用。Vite 也是使用 Rollup 做构建工具。

Rollup 提供一个函数，rollup.rollup 函数返回一个 Promise，它解析了一个 bundle 对象，此对象带有不同的属性及方法，如下：

const rollup = require('rollup');

// see below for details on the options
const inputOptions = {...};
const outputOptions = {...};

async function build() {
  // create a bundle
  const bundle = await rollup.rollup(inputOptions);

  console.log(bundle.imports); // an array of external dependencies
  console.log(bundle.exports); // an array of names exported by the entry point
  console.log(bundle.modules); // an array of module objects

  // generate code and a sourcemap
  const { code, map } = await bundle.generate(outputOptions);

  // or write the bundle to disk
  await bundle.write(outputOptions);
}

build();

附录一，命令行常用参数：

-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)
--amd.id                    AMD模块的ID，默认是个匿名函数
--amd.define                使用Function来代替`define`
--no-strict                 在生成的包中省略`"use strict";`
--no-conflict               对于UMD模块来说，给全局变量生成一个无冲突的方法
--intro                     在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro                     在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner                    在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer                    在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop                   包含公共的模块（这个选项是默认添加的）
-h/--help                   打印帮助文档。
-v/--version                打印已安装的Rollup版本号。
-w/--watch                  监听源文件是否有改动，如果有改动，重新打包
--silent                    不要将警告打印到控制台。

参考：

https://rollupjs.org

修改时间 2024-03-05