概述:
Rollup 是一个 JavaScript 模块打包工具,可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同,Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数
安装:
yarn global add rollup // 进行rollu的全局安装
// 查看当前rollup的版本
rollup --version
快速入门:
rollup -i main.js --file dist.js --format cjs --name abc --watch --environment TEST:test --plugin json
// -i 表示input即入口文件
// -c 表示指定rollup的配置文件
// --file表示output 输出文件
// --format表示格式 一个如:cjs(common.js) ejs(es module) umd ...
// --name 是一个选项,用于为UMD模块指定名称。UMD模块是一种通用模块定义规范,它可以在不同的环境中使用,包括AMD、CommonJS和全局变量。当使用Rollup构建UMD模块时,可以使用"name"选项来指定库的名称。这个名称将成为全局变量的名称,使得在浏览器环境中可以通过全局变量来访问这个库。
// --watch表示对文件进行变化监听
// --environment进行环境变量的声明 TEST:test TEST表示声明的key test表示值 在项目中访问 process.env.TEST进行访问
// --plugin表示使用json这个plugin,但前提需要安装 @rollup/plugin-json, 但是通过命令行来使用这个插件,需要调整项目内的node_modules里的rollup,否则使用的是全局的,所以就需要对每个项目安装rollup
// 如果是多个文件,那么可以使用--dir实现把文件输出到指定的文件夹下
rollup -i a.js -i b.js --dir dist
// 以上表示把a.js, b.js编译完成后输出到dist文件夹下
在rollup中大部份的功能是由plugin提供的,并且官方提供的plugin如babel, typescript等功能,具体可以参看网址:https://github.com/rollup/plugins
rollup的配置文件
在rollup中使用配置文件,可以在script中指定配置文件
"scripts": {
"start:dev": "rollup -c rollup.config.js"
}
以上表示指定rollup.config.js为rollup的配置文件,并且在执行rollup的时候指定配置文件