使用Rollup打包JavaScript

rollup是一款小巧的javascript模塊打包工具，更適合於庫應用的構建工具;能夠將小塊代碼編譯成大塊複雜的代碼，基於ES6 modules,它可讓你的 bundle 最小化，有效減小文件請求大小,vue在開發的時候用的是webpack,可是最後將文件打包在一塊兒的時候用的是 rollup.js

首次發表在我的博客

• rollup官方文檔
• rollupGithub

全局安裝

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-plugin-alias: 提供modules名稱的 alias 和reslove 功能
• rollup-plugin-babel: 提供babel能力
• rollup-plugin-eslint: 提供eslint能力
• rollup-plugin-node-resolve: 解析 node_modules 中的模塊
• rollup-plugin-commonjs: 轉換 CJS -> ESM, 一般配合上面一個插件使用
• rollup-plugin-serve: 類比 webpack-dev-server, 提供靜態服務器能力
• rollup-plugin-filesize: 顯示 bundle 文件大小
• rollup-plugin-uglify: 壓縮 bundle 文件
• rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在源碼中經過 process.env.NODE_ENV 用於構建區分 Development 與 Production 環境.

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更爲適合;