rollup的简单使用

快速入门指南(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插件