阅读文档:Rollup中文官方文档
一、Rollup是什么?
Rollup
是使用ES Module
格式进行对JavaScript
的模块打包工具,提供一个充分利用ESM各项特性
的高效打包工具
,允许使用ES Module
编写代码,然后将其编译回多种
模块化格式。
1.1 Rollup的特点
- 拥有
Tree Shaking
- 兼容性,可以通过插件导入
common js
和发布es
模块
1.2 Rollup的快速上手
有两种方式运行Rollup
:
- 提供一个
可选
的Rollup 配置文件
,以简化命令行使用并启用高级 Rollup 功能 - 导入
rollup
库来使用
命令行方式运行Rollup
在官方文档当中提到了两种方式:1、全局安装Rollup,作为全局命令行工具使用;2、本地安装Rollup,配合package.json
或者npx rollup
去使用。
以上两种方式都需要配置文件rollup.config.js
一起使用,同时,使用配置文件必须传递--config
或者-c
标志。
# 向 Rollup 传递自定义配置文件位置
rollup --config my.config.js
npx rollup --config my.config.js
# 如果你没有传递文件名,Rollup 将会尝试
# 按照以下顺序加载配置文件:
# rollup.config.mjs -> rollup.config.cjs -> rollup.config.js
rollup --config
npx rollup --config
使用
package.json
或者npx rollup
去使用的原理不懂的朋友可以看这两篇文章:
【Npm】npx到底是干什么
【Npm】一文了解透彻package.json里的script字段以及相关知识
配置文件支持语法提示
有两种方式:
// 方式一
/*** @type {import('rollup').RollupOptions}*/
const config = {/* 你的配置 */
};
export default config;
// 方式二
import { defineConfig } from 'rollup';export default defineConfig({/* 你的配置 */
});
注意:
由于配置文件
rollup会通过node去读取,整个文件都是esm
形式,不能使用commonjs的形式去写。
JavaScript API方式运行Rollup
应用场景:编程式打包、扩展Rollup本身。
二、Rollup的代码分割
有三种情况,Rollup会自动将代码拆分成块:
- 动态加载
- 多个入口点
output.manualChunks