快速入門指南(Quick start)

使用 npm install --global rollup 進(jìn)行安裝。

命令行的參數(shù)(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  監(jiān)聽(tīng)文件變化

如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插件的用途是在打包時(shí)動(dòng)態(tài)替換代碼中的內(nèi)容

// 使用replace值__SAM__，注意這個(gè)值沒(méi)有定義，如果直接運(yùn)行會(huì)報(bào)錯(cuò)
// config.js中plugins加入： replace({
//      __SAM__: true
//  }) 
//  可以將 __SAM__ 替換 為 true
if (__SAM__) { 
  console.log(`__SAM__,${a},$,${c}`) // 使用__SAM__，打包時(shí)會(huì)被替換
} 

vue中打包時(shí)下面這些變量會(huì)被替換，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打包的過(guò)程中進(jìn)行代碼編譯，將ES6+代碼編譯成ES2015標(biāo)準(zhǔn)，首先在項(xiàng)目中引入buble插件