title

rollup是一款小巧的javascript模塊打包工具，更適合于庫應(yīng)用的構(gòu)建工具;可以將小塊代碼編譯成大塊復(fù)雜的代碼，基于ES6 modules,它可以讓你的 bundle 最小化，有效減少文件請求大小,vue在開發(fā)的時候用的是webpack,但是最后將文件打包在一起的時候用的是 rollup.js

首次發(fā)表在個人博客

rollup官方文檔
rollupgithub

全局安裝

npm install --global rollup

開始使用rollup

創(chuàng)建第一個bundle

創(chuàng)建main.js

console.log(111);

執(zhí)行 rollup --input main.js --output bundle.js --format cjs, 該命令編譯 main.js 生成 bundle.js, --format cjs 意味著打包為 node.js 環(huán)境代碼, 請觀察 bundle.js 文件內(nèi)容

'use strict'
console.log(111);

命令行參數(shù)簡介:

輸入(input -i/--input)

String 這個包的入口點 (例如：你的 main.js 或者 app.js 或者 index.js)

文件(file -o/--output.file)
String 要寫入的文件。也可用于生成 sourcemaps，如果適用

格式(format -f/--output.format)
關(guān)于format選項
rollup提供了五種選項:

• amd – 異步模塊定義，用于像RequireJS這樣的模塊加載器
• cjs – CommonJS，適用于 Node 和 Browserify/Webpack
• es – 將軟件包保存為ES模塊文件
• iife – 一個自動執(zhí)行的功能，適合作為<script>標(biāo)簽。（如果要為應(yīng)用程序創(chuàng)建一個捆綁包，您可能想要使用它，因為它會使文件大小變小。）
• umd – 通用模塊定義，以amd，cjs 和 iife 為一體

使用配置文件

rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};

執(zhí)行 rollup -c rollup.config.js啟動配置項;

rollup 提供了 --watch / -w 參數(shù)來監(jiān)聽文件改動并自動重新打包

使用rollup插件

npm install --save-dev rollup-plugin-json

我們用的是 --save-dev 而不是 --save，因為代碼實際執(zhí)行時不依賴這個插件——只是在打包時使用。

在配置文件中啟用插件

import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    plugins: [
        json(),
    ],
}

新建文件 data.json

{
    "name": "xiaoming",
    "age": 12
}

在main.js 引入 data.json

import { name } from './data.json';
console.log(name);

執(zhí)行 rollup -c rollup.config.js,并查看 bundle.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (factory());
}(this, (function () { 'use strict';

var name = "xiaoming";

console.log(name);

})));

看到bundle中僅引用了data.json中的name字段,這是因為rollup會自動進行 Tree-shaking,main.js中僅引入了name,age并沒有沒引用,所以age并不會被打包

rollup基礎(chǔ)插件

• rollup-plugin-alias: 提供modules名稱的 alias 和reslove 功能
• rollup-plugin-babel: 提供babel能力
• rollup-plugin-eslint: 提供eslint能力
• rollup-plugin-node-resolve: 解析 node_modules 中的模塊
• rollup-plugin-commonjs: 轉(zhuǎn)換 CJS -> ESM, 通常配合上面一個插件使用
• rollup-plugin-serve: 類比 webpack-dev-server, 提供靜態(tài)服務(wù)器能力
• rollup-plugin-filesize: 顯示 bundle 文件大小
• rollup-plugin-uglify: 壓縮 bundle 文件
• rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在源碼中通過 process.env.NODE_ENV 用于構(gòu)建區(qū)分 Development 與 Production 環(huán)境.

rollup于其他工具集成

打包npm 模塊

于webpack和Browserify不同, rollup 不會去尋找從npm安裝到你的node_modules文件夾中的軟件包;
rollup-plugin-node-resolve 插件可以告訴 Rollup 如何查找外部模塊

npm install --save-dev rollup-plugin-node-resolve

打包 commonjs模塊

npm中的大多數(shù)包都是以CommonJS模塊的形式出現(xiàn)的。 在它們更改之前，我們需要將CommonJS模塊轉(zhuǎn)換為 ES2015 供 Rollup 處理。
rollup-plugin-commonjs 插件就是用來將 CommonJS 轉(zhuǎn)換成 ES2015 模塊的。
請注意，rollup-plugin-commonjs應(yīng)該用在其他插件轉(zhuǎn)換你的模塊之前 - 這是為了防止其他插件的改變破壞CommonJS的檢測

npm install --save-dev rollup-plugin-commonjs

使用babel

使用 Babel 和 Rollup 的最簡單方法是使用 rollup-plugin-babel

npm install --save-dev rollup-plugin-babel

新建.babelrc

{
    "presets": [
        ["latest", {
            "es2015": {
                "modules": false
            }
        }]
    ],
    "plugins": ["external-helpers"]
}

• 首先，我們設(shè)置"modules": false，否則 Babel 會在 Rollup 有機會做處理之前，將我們的模塊轉(zhuǎn)成 CommonJS，導(dǎo)致 Rollup 的一些處理失敗
• 我們使用external-helpers插件，它允許 Rollup 在包的頂部只引用一次 “helpers”，而不是每個使用它們的模塊中都引用一遍（這是默認行為）
  運行 rollup之前, 需要安裝latest preset 和external-helpers插件

npm i -D babel-preset-latest babel-plugin-external-helpers

一個簡單的配置項

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    watch: {
        exclude: 'node_modules/**'
    },
    plugins: [
        resolve(),
        commonjs(),
        json(),
        babel({
            exclude: 'node_modules/**',
            plugins: ['external-helpers'],
        }),
    ],
}

rollup優(yōu)勢

• 自動 Tree-shaking(Tree-shaking, 也被稱為 "live code inclusion," 它是清除實際上并沒有在給定項目中使用的代碼的過程，但是它可以更加高效。)
• 打包速度快
• 配置簡單

rollup VS webpack

rollup更適合構(gòu)建javascript庫,也可用于構(gòu)建絕大多數(shù)應(yīng)用程序;但是rollup 還不支持一些特定的高級功能，尤其是用在構(gòu)建一些應(yīng)用程序的時候，特別是代碼拆分和運行時態(tài)的動態(tài)導(dǎo)入 dynamic imports at runtime.如果你的項目中需要這些功能,則使用webpack更為適合;