一、簡介

rollup 是一個JavaScript模組打包器，可以將小塊程式碼編譯成大塊複雜的程式碼，其原始碼中模組的匯入匯出採用的是ES6模組語法，即原始碼需要採用ES6語法進行編寫。

rollup與webpack的對比:

• rollup只能處理js模組，而webpack可以處理任何資源，可以把所有的資源都當成模組進行處理。
• rollup多適用於類庫的打包，打包的程式碼需要供他人使用，webpack多適用於應用的打包。
• rollup一般不會產生額外的程式碼(除了必要的cjs, umd頭外)，所以rollup打包出來的程式碼執行更快、可讀性更強，webpack由於功能強大，所以會產生很多額外的程式碼、打包出來的檔案較大、執行較慢、可讀性較差
• rollup會將所有資源放同一個地方，一次性載入,利用 tree-shake特性來剔除未使用的程式碼，減少冗餘，而webpack則是拆分程式碼、按需載入

二、安裝與基本使用

要使用rollup，需要在全域性進行安裝，如:

// 全域性安裝rollup
> sudo npm install --global rollup

rollup安裝完成後，就可以通過rollup命令進行打包了:

① rollup 模組入口檔案:

// 進入專案根目錄下，並以src目錄下的index.js作為模組入口進行打包
> rollup ./src/index.js

此時可以看到直接在控制檯中輸出了模組打包結果，因為沒有指定將打包結果輸出到哪個檔案下

② 指定模組輸出， --file

// 將打包結果輸出到當前目錄下的bundle.js檔案中
> rollup ./src/index.js --file bundle.js

③ 指定打包後的模組輸出格式，--format

// 將模組打包成iife格式，即將模組放到匿名自執行函式中執行
> rollup ./src/index.js --file bundle.js --format iife

如果沒有指定format，那麼預設會輸出為es格式。rollup支援的模組輸出格式為:es、cjs、amd、umd、iife、system。其中cjs就是CommonJS模組規範

④ 指定打包後模組的輸出結果接收變數，--name
即指定一個變數用於接收打包後的模組輸出結果

// 用result變數來接收模組的輸出結果
> rollup ./src/index.js --file bundle.js --format iife --name result

輸出結果如下:

var result = (function () {
    'use strict';
    const foo = "foo";
    return foo;
}());

⑤ 原始碼中模組的匯入匯出必須使用es6模組語法
如果原始碼中模組的匯入匯出採用的是CommonJS模組語法，那麼打包後仍然會包含require，如:

// foo.js
const foo = "foo";
module.exports = foo;

// index.js
const foo = require("./foo");
console.log(foo);
module.exports = foo;

> rollup ./src/index.js --file bundle.js --format cjs

打包後的輸出結果中仍然包含require語法

'use strict';

const foo = require("./foo");
console.log(foo);
module.exports = foo;

從打包結果可以看到，原始碼中的require語句原封不動輸出到了bundle.js中，由於bundle.js的路徑不固定，故require("./foo")執行可能因為找不到模組而失敗。

三、使用配置檔案打包

要使用配置檔案進行打包，需要帶上-c引數，後面接配置檔案即可，配置檔案預設位置在專案根目錄下，預設檔名為rollup.config.js。

① 在專案根目錄下新建一個rollup.config.js檔案

// rollup.config.js
export default {
    input: "src/index.js", // 指定模組入口
    output: {
        file: "bundle.js", // 指定模組輸出檔案路徑
        format: "cjs" // 指定模組輸出格式
    }
}

② 通過rollup -c 載入配置檔案進行打包

// 使用專案根目錄下的rollup.config.js配置檔案進行打包
> rollup -c

四、使用外掛

rollup也支援我們使用一些外掛來為打包提供更大的靈活性。
① 使用babel外掛編譯我們的js檔案

// 首先安裝rollup-plugin-babel外掛
> npm install rollup-plugin-babel --save-dev

② 在配置檔案中引入babel外掛

import bable from "rollup-plugin-babel"; // 引入babel外掛

export default {
    input: "src/index.js",
    output: {
        file: "bundle.js",
        format: "cjs"
    },
    plugins: [
        bable({ // 新增babel外掛
            exclude: "node_modules/**" // 排除node_modules下的檔案
        })
    ]
}

③ 新增.babelrc檔案

// 安裝babel預設
> npm install @babel/preset-env --save-dev

即用@babel/preset-env模組中定義的預設進行處理，所以需要安裝@babel/preset-env模組

{
    "presets": [
        "@babel/preset-env" // 新增安裝好的預設
    ]
}

此時再打包，原始碼中的es6語法就能被轉換為es5了。

豌豆資源搜尋網站https://55wd.com 電腦刺繡繡花廠 ttp://www.szhdn.com