快速入门指南(Quick start)
使用 npm install --global rollup 进行安装。
命令行的参数(Command line flags)
-c --config 指定配置文件
--environment 指定process.env上属性值 INCLUDE_DEPS,BUILD:production
rollup -c --environment INCLUDE_DEPS,BUILD:production
process.env.INCLUDE_DEPS=true and process.env.BUILD = production
-w 监听文件变化
如vue命令行
rollup -w -c scripts/config.js --environment TARGET:web-full-dev
<img src="C:\Users\gengyu\AppData\Roaming\Typora\typora-user-images\image-20210728092638286.png" alt="image-20210728092638286" style="zoom: 67%;" />
rollup.config.js
下图为vue源码的rollup配置
<img src="C:\Users\gengyu\AppData\Roaming\Typora\typora-user-images\image-20210728091914593.png" alt="image-20210728091914593" style="zoom:67%;" />
{
"input": "C:\\Users\\gengyu\\Documents\\demo\\js\\vue\\src\\platforms\\web\\entry-runtime.js",
"plugins": [
{
"name": "flow-remove-types"
},
{
"name": replace(vars)
},
{
"name": "buble"
}
],
"output": {
"file": "C:\\Users\\gengyu\\Documents\\demo\\js\\vue\\dist\\vue.runtime.common.dev.js",
"format": "cjs",
"banner": "/*!\n * Vue.js v2.6.12\n * (c) 2014-2021 Evan You\n * Released under the MIT License.\n */",
"name": "Vue"
}
}
rollup-plugin-replace使用
replace插件的用途是在打包时动态替换代码中的内容
// 使用replace值__SAM__，注意这个值没有定义，如果直接运行会报错
// config.js中plugins加入： replace({
// __SAM__: true
// })
// 可以将 __SAM__ 替换 为 true
if (__SAM__) {
console.log(`__SAM__,${a},${b},${c}`) // 使用__SAM__，打包时会被替换
}
vue中打包时下面这些变量会被替换，replace(vars)
<img src="C:\Users\gengyu\AppData\Roaming\Typora\typora-user-images\image-20210728110010791.png" alt="image-20210728110010791" style="zoom: 80%;" />
rollup-plugin-buble使用
buble插件的用途是在rollup.js打包的过程中进行代码编译，将ES6+代码编译成ES2015标准，首先在项目中引入buble插件
