admin
简介
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
