rollup模塊打包器入門

1、簡介

rollup 是一個 JavaScript 模塊打包器，能夠將小塊代碼編譯成大塊複雜的代碼，其源碼中模塊的導入導出採用的是ES6模塊語法，即源碼須要採用ES6語法進行編寫。

rollup與webpack的對比:

• rollup只能處理js模塊，而webpack能夠處理任何資源，能夠把全部的資源都當成模塊進行處理。
• rollup多適用於類庫的打包，打包的代碼須要供他人使用，webpack多適用於應用的打包。
• rollup通常不會產生額外的代碼(除了必要的cjs, umd頭外)，因此rollup打包出來的代碼執行更快、可讀性更強，webpack因爲功能強大，因此會產生不少額外的代碼、打包出來的文件較大、執行較慢、可讀性較差
• rollup會將全部資源放同一個地方，一次性加載,利用 tree-shake特性來剔除未使用的代碼，減小冗餘，而webpack則是拆分代碼、按需加載

2、安裝與基本使用

要使用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")執行可能由於找不到模塊而失敗。

3、使用配置文件打包

要使用配置文件進行打包，須要帶上-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

4、使用插件

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了。