使用Rollup打包JavaScript

funnycoderstar發表於2019-03-04
JavaScript

title

rollup是一款小巧的javascript模組打包工具，更適合於庫應用的構建工具;可以將小塊程式碼編譯成大塊複雜的程式碼，基於ES6 modules,它可以讓你的 bundle 最小化，有效減少檔案請求大小,vue在開發的時候用的是webpack,但是最後將檔案打包在一起的時候用的是 rollup.js

首次發表在個人部落格

全域性安裝

npm install --global rollup
複製程式碼

開始使用rollup

建立第一個bundle

建立main.js

console.log(111);
複製程式碼

執行 rollup --input main.js --output bundle.js --format cjs, 該命令編譯 main.js 生成 bundle.js, --format cjs 意味著打包為 node.js 環境程式碼, 請觀察 bundle.js 檔案內容

'use strict'
console.log(111);
複製程式碼

命令列引數簡介:

輸入(input -i/--input)

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

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

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

  • amd – 非同步模組定義，用於像RequireJS這樣的模組載入器
  • cjs – CommonJS，適用於 Node 和 Browserify/Webpack
  • es – 將軟體包儲存為ES模組檔案
  • iife – 一個自動執行的功能，適合作為<script>標籤。（如果要為應用程式建立一個捆綁包，您可能想要使用它，因為它會使檔案大小變小。）
  • umd – 通用模組定義，以amd，cjs 和 iife 為一體

使用配置檔案

rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};
複製程式碼

執行 rollup -c rollup.config.js啟動配置項;

rollup 提供了 --watch / -w 引數來監聽檔案改動並自動重新打包

使用rollup外掛

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

複製程式碼

我們用的是 --save-dev 而不是 --save，因為程式碼實際執行時不依賴這個外掛——只是在打包時使用。

在配置檔案中啟用外掛

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);
複製程式碼

執行 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基礎外掛

rollup於其他工具整合

打包npm 模組

於webpack和Browserify不同, rollup 不會去尋找從npm安裝到你的node_modules資料夾中的軟體包; rollup-plugin-node-resolve 外掛可以告訴 Rollup 如何查詢外部模組

npm install --save-dev rollup-plugin-node-resolve
複製程式碼

打包 commonjs模組

npm中的大多數包都是以CommonJS模組的形式出現的。 在它們更改之前，我們需要將CommonJS模組轉換為 ES2015 供 Rollup 處理。 rollup-plugin-commonjs 外掛就是用來將 CommonJS 轉換成 ES2015 模組的。 請注意，rollup-plugin-commonjs應該用在其他外掛轉換你的模組之前 - 這是為了防止其他外掛的改變破壞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"]
}
複製程式碼
  • 首先，我們設定"modules": false，否則 Babel 會在 Rollup 有機會做處理之前，將我們的模組轉成 CommonJS，導致 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優勢

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

rollup VS webpack

rollup更適合構建javascript庫,也可用於構建絕大多數應用程式;但是rollup 還不支援一些特定的高階功能，尤其是用在構建一些應用程式的時候，特別是程式碼拆分和執行時態的動態匯入 dynamic imports at runtime.如果你的專案中需要這些功能,則使用webpack更為適合;

相關文章