概述
Rollup 是一个基于ES Module 模块规范的JavaScript 打包工具，在前端社区中广为人知，在Vite 的架构体系中发挥着重要作用，同时也是Vite 的生产打包工具。它的插件机制也被Vite 使用、兼容，并且是Vite 的构建块。
快速上手
首先，使用$ npm init -y 创建一个新项目并安装汇总依赖项： $ pnpm i rollup。
接下来，添加三个文件：src/index.js、src/util.js 和rollup.config.js。目录结构如下：
包.json
pnpm-lock.yaml
rollup.config.js
来源
index.js
util.js
该文件的内容是：
//src/index.js
进口{
添加
来自\’./util\’；
控制台.log(添加(1, 2));
//src/util.js
导出const add=(a, b)=a + b;
导出const multi=(a, b)=a * b;
//rollup.config.js
//下面的注释是在VSCode 中使用类型提示
/**
* @type { import(\’rollup\’).RollupOptions }
*/
常量构建选项={
input: [\’src/index.js\’],
输出： {
//产品输出目录
dir: \’dist/es\’,
//产品格式
格式：\’esm\’，
},
};
导出默认构建选项。
您可以将以下构建脚本： 添加到package.json 中。
{
//Rollup打包命令，`-c`表示使用配置文件中的设置
\’build\’: \’汇总-c\’
}
然后在终端中运行$ npm run build，你将看到以下命令行信息：
您现在已经使用Rollup 创建了第一个产品。您可以通过导航到dist/es 目录来查看产品内容。
//dist/es/index.js
//代码打包在一起
const add=(a, b)=a + b;
控制台.log(添加(1, 2));
同时也可以看到util.js中的multi方法并没有被封装到产品中。这是Rollup 造成的。
它具有自然摇树功能，可以分析并自动清除未使用的模块。所谓Tree Shaking，也是计算机编译原理中DCE（Dead Code Elimination）技术的一种实现。这是因为ES 模块依赖关系是确定性的并且独立于运行时状态。因此，Rollup 可以在编译阶段分析依赖关系，并删除AST 语法树中未使用的节点，从而实现Tree Shaking。
常用配置
1）多产品组成
打包JavaScript 类库的场景通常涉及以各种格式发布产品以供其他用户使用。
除了ESM之外，我们还使用CommonJS、UMD等格式来保证良好的兼容性。那
那么如何使用相同的入口文件以不同的格式汇总打包您的产品呢？继续牢记上述内容
配置文件更改：
//rollup.config.js
/**
* @type { import(\’rollup\’).RollupOptions }
*/
常量构建选项={
input: [\’src/index.js\’],
//将输出更改为数组
输出： [{
dir: \’dist/es\’,
格式：\’esm\’，
},
{
dir: \’dist/cjs\’,
format: \’cjs\’,
},
],
};
导出默认构建选项。
从代码中可以看到，我们将输出属性配置到一个数组中，数组中的每个元素都是一个描述。
对象决定了各种产品的输出行为。
2）多入口配置
除了多产品配置之外，汇总还支持多条目配置，通常是两者的组合。
使用。接下来，继续转换之前的配置文件，将输入设置为数组或对。
如下所示的对象{
input: [\’src/index.js\’, \’src/util.js\’]
}
//或者
{
输入： {
Index: \’src/index.js\’,
util: \’src/util.js\’,
},
}
如果运行$ npm run build ，您可以看到它成功地为所有条目输出了不同格式的产品。
如果你有不同的封装配置对应不同的入口，也可以默认导出配置数组，如下图。 //rollup.config.js
/**
* @type { import(\’rollup\’).RollupOptions }
*/
常量buildIndexOptions={
input: [\’src/index.js\’],
输出： [
//省略输出设置
],
};
/**
* @type { import(\’rollup\’).RollupOptions }
*/
常量buildUtilOptions={
input: [\’src/util.js\’],
输出： [
//省略输出设置
],
};
导出默认值[buildIndexOptions, buildUtilOptions];
对于更复杂的打包场景（例如打包Vite源码本身），您可能需要将项目代码拆分成多个部分。
这种配置非常方便，因为各个部件分别封装在不同的卷绕配置中。
3）自定义输出配置
我们讨论了使用输入，输入主要用于声明条目，可以配置为字符串、数组或对。
它相对容易使用。相反，output用于设置与输出相关的信息。常用的设置包括：
//产品输出目录
dir: 路径.resolve(__dirname, \’dist\’),
//这些占位符可用于三个配置项：
//1. [name]: 去除文件扩展名后的文件名
//2. [hash]: 根据文件名和文件内容生成的哈希值
//3. [格式]: 产品模块格式（es、cjs等）
//4. [extname]: 产品后缀名（带“.”）
//入口模块输出文件名
入口文件名： `[name].js`,
//非入口模块的输出文件名（动态导入等）
chunkFileNames: \’块-[哈希].js\’,
//静态资源文件的输出文件名
assetFileNames: \’资产/[名称]-[哈希][扩展名称]\’,
//产品输出格式（`amd`、`cjs`、`es`、`iife`、`umd`、`system` 等）
format: \’cjs\’,
//是否生成source map文件
源图： 真实，
//如果是打包iife/umd格式，必须暴露全局变量，并通过name设置变量名
name: \’我的包\’,
//全局变量声明
全局： {
//你可以在项目中直接使用`$` 代替`jquery`
jquery: \’$\’
}
}
4）外部依赖
有些第三方包可能不想用Rollup打包，也可以使用external进行外部打包。
化工：
{
external: [\’反应\’，\’反应-dom\’]
}
该配置在搭建SSR或者使用ESM CDN的场景下非常有用。
5) 访问插件功能
日常使用Rollup时，难免会遇到一些Rollup本身不支持的场景，比如兼容性。
打包CommonJS、注入环境变量、配置路径别名、压缩生产代码等等。你现在需要我
我们引入了相应的Rollup 插件。现在我们通过一个具体的场景来了解Rollup插件。
零件的使用。
Rollup可以将产品以CommonJS格式打包输出，但是输入到Rollup中的代码是
不支持CommonJS。仅支持ESM。您可能认为这样您就可以直接在项目中使用ESM。
标准已经足够好了，但是除了考虑项目本身的代码之外，还有什么问题呢？
考虑第三方依赖性。目前，我们仅依赖CommonJS 格式的产品。
我们提供ESM 产品。例如，如果您的项目使用lodash，您将在打包的项目中看到以下错误：
因此，您需要引入额外的插件来解决这个问题。首先需要安装两个核心插件包：
$ pnpm 我@rollup/plugin-node-resolve @rollup/plugin-commonjs
@rollup/plugin-node-resolve 用于允许加载第三方依赖项。否则，像import React from \’react\’ 这样的依赖导入语句将不会被Rollup 识别。 @rollup/plugin-commonjs的作用是将CommonJS格式的代码转换为ESM格式。接下来，将这些插件导入到您的配置文件：conf 中。
//rollup.config.js
从“@rollup/plugin-node-resolve”执行导入解析。
从“@rollup/plugin-commonjs”导入commonjs。
/**
* @type { import(\’rollup\’).RollupOptions }
*/
默认导出{
input: [\’src/index.js\’],
输出： [{
dir: \’dist/es\’,
格式：\’esm\’，
},
{
dir: \’dist/cjs\’,
format: \’cjs\’,
},
],
//通过plugin参数添加插件
plugins: [resolve(), commonjs()],
};
现在我们以lodash为例来测试： $ pnpm i lodash，这是一个仅包含CommonJS产品的第三方包。
将以下代码： 添加到src/index.js。
从“lodash”导入{合并}；
控制台.log(合并);
之后运行$ npm run build 确认生成成功。
在汇总配置文件中，插件不仅可以与输出配置在同一级别，还可以与输出配置在同一级别。
在输出参数中（例如，）
//rollup.config.js
从\’rollup-plugin-terser\’ 导入{terser}
从“@rollup/plugin-node-resolve”执行导入解析。
从“@rollup/plugin-commonjs”导入commonjs。
默认导出{
输出： {
//添加terser插件来压缩代码
插件： [terser()]
},
plugins: [resolve(), commonjs()]
}
当然，你也可以将上面的terser插件放在你最外层的插件配置中。
请注意，Output.plugins 中配置的插件有一定的限制。仅使用输出级。
只有具有相关钩子的插件才能放置在该配置中（具体内容下一节讨论）。您可以访问此站点查看Rollup 的输出插件列表。
另外，这里还有一些其他常用的rollup插件库。
@rollup/plugin-json：支持.json加载并与rollup的Tree Shaking机制配合使用。
按需删除未使用的部分并打包@rollup/plugin-babel：使用Babel 配合Rollup 进行JS 代码的语法转换@rollup/plugin-typescript: 支持使用TypeScript 开发@rollup/plugin -alias：支持别名设置。 @rollup/plugin-replace：替换rollups中的变量字符串rollup-plugin-visualizer:分析rollup包产品，自动生成产品量可视化分析图表
JavaScript API 方式调用
上面，我们结合Rollup的配置文件和rollup -c来完成Rollup的打包过程，但是在某些情况下，
在这种情况下，我需要基于rollup自定义一些打包流程，但配置文件目前还没有足够的灵活性。
要调用Rollup，需要使用相应的JavaScript API。 Rollup主要分为rollup.rollup和rollup.watch。
通过具体示例学习API。
第一个是rollup.rollup，用于一次性打包Rollups。您可以创建一个新的build.js，其中包含以下内容：
//构建.js
const rollup=require(\’rollup\’);
//常用的inputOptions设置
常量输入选项={
输入：\’./src/index.js\’,
外部：[]，
插件：[]
};
const 输出选项列表=[
//常用的outputOptions设置
{
dir: \’dist/es\’,
入口文件名： `[name].[hash].js`,
chunkFileNames: \’块-[哈希].js\’,
assetFileNames: \’资产/[名称]-[哈希][扩展名称]\’,
格式： \’es\’,
源图： 真实，
全局： {
lodash: \’_\’
}
}
//省略其他输出设置
];
异步函数build() {
我们把它绑起来吧。
设置buildFailed=false。
尝试{
//1.调用rollup.rollup生成bundle对象
捆绑=等待rollup.rollup(inputOptions);
for (outputOptionsList 中的const OutputOptions) {
//2. 获取bundle对象，根据各个输出配置分别调用generate和write方法生成和写入产品。
持续的{
输出
=waitBundle.generate(outputOptions);
等待bundle.write(outputOptions);
}
} 捕获（错误）{
构建失败=true；
控制台.错误（错误）；
}
如果（捆绑）{
//最后调用bundle.close方法完成打包
等待bundle.close();
}
process.exit(构建失败？1 : 0);
}
建造（）;
主要执行步骤如下：
通过rollup.rollup方法，传递inputOptions，生成bundle对象，调用bundle对象的Generate和write方法，传递outputOptions完成每一项。
产品、构建和磁盘刻录器调用捆绑对象的close 方法来完成打包。这样您就可以以编程方式完成汇总调用。
这就是包装过程。除了通过rollup.rollup完成一次性打包之外，还可以通过rollup.watch完成监控。
打包模式会在源文件发生更改时自动重新打包。可以新建一个watch.js文件，输入：下的内容。
//watch.js
const rollup=require(\’rollup\’);
const 观察者=rollup.watch({
//与rollup配置文件基本相同的属性，除了添加`watch`配置
输入：\’./src/index.js\’,
输出： [{
dir: \’dist/es\’,
格式：\’esm\’，
},
{
dir: \’dist/cjs\’,
format: \’cjs\’,
},
],
观看： {
排除： [\’node_modules/**\’]，
include:[\’src/**\’],
},
});
//观察各种事件
watcher.on(\’重新启动\’, ()={
console.log(\’重建.\’);
});
watcher.on(\’变化\’, (id)={
console.log(\’修改模块id:\’, id);
});
watcher.on(\’事件\’, (e)={
if (e.code===\’BUNDLE_END\’) {
console.log(\’包装信息：\’, e);
}
});
现在，您可以通过在修改文件时运行节点watch.js 来打开汇总的监视打包模式。
您将看到以下日志：这表明rollup被自动重新打包并触发了相应的事件回调函数：
修改模块id: /xxx/src/index.js
重建.
包装信息：
{
代码：“Bundle_END”，
期间： 10,
输入：\’./src/index.js\’,
输出： [
//输出产品路径
],
结果： {
缓存： {
/* 产品特定信息*/},
close: [AsyncFunction: 关闭],
关闭： 假，
generate: [AsyncFunction: 生成],
watchFiles: [
//监听文件列表
],
write: [AsyncFunction: 写入]
}
}
基于以上两个JavaScript API，您可以在代码中轻松调用Rollup打包流程。
您可以使用这些API 在代码中控制汇总打包过程。
也可定制和二次开发
以上#Vite:汇总包信息仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92684.html
