使用 rollup 打包 JS

初代發表於2018-12-05
JS

前言

rollup 採用 es6 原生的模組機制進行模組的打包構建，rollup 更著眼於未來，對 commonjs 模組機制不提供內建的支援，是一款更輕量的打包工具。rollup 比較適合打包 js 的 sdk 或者封裝的框架等，例如，vue 原始碼就是 rollup 打包的。而 webpack 比較適合打包一些應用，例如 SPA 或者同構專案等等。

建立專案

目錄結構是這樣的：

hey-rollup/
├── dist
│   ├── bundle-name.js
│   └── bundle-name.min.js
├── example
│   ├── dist
│   │   └── example.js
│   ├── index.html
│   └── index.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
│   └── index.js
└── test
    └── index.js
複製程式碼

你可以在你的終端中執行下面的命令來安裝此專案

# cd /path/to/your/projects
git clone https://github.com/daixwu/hey-rollup.git
複製程式碼

安裝 Rollup

通過下面的命令安裝 Rollup:

npm install --save-dev rollup
複製程式碼

建立配置檔案

在 hey-rollup 資料夾中建立一個新檔案 rollup.config.js。之後在檔案中新增下面的內容：

export default {
  input: "src/main.js",
  output: {
    file: "dist/js/main.min.js",
    format: "umd",
    name: 'bundle-name'
  }
};
複製程式碼

下面是每一個配置選項都做了些什麼：

  • input —— 要打包的檔案

  • output.file —— 輸出的檔案 (如果沒有這個引數，則直接輸出到控制檯)

  • output.format —— Rollup 輸出的檔案型別 (amd, cjs, es, iife, umd)

    • amd – 非同步模組定義，用於像 RequireJS 這樣的模組載入器

    • cjs – CommonJS，適用於 Node 和 Browserify/Webpack

    • es – 將軟體包儲存為 ES 模組檔案

    • iife – 一個自動執行的功能，適合作為<script>標籤。（如果要為應用程式建立一個捆綁包，您可能想要使用它，因為它會使檔案大小變小。）

    • umd – 通用模組定義，以 amd，cjs 和 iife 為一體

  • output.name --生成包名稱，代表你的 iife/umd 包，同一頁上的其他指令碼可以訪問它（iife/umd 沒有 name 會報錯的）

搭配 babel 7

rollup 的模組機制是 ES6 Modules，但並不會對 es6 其他的語法進行編譯。因此如果要使用 es6 的語法進行開發，還需要使用 babel 來幫助我們將程式碼編譯成 es5。

安裝模組

rollup-plugin-babel 將 rollup 和 babel 進行了完美結合。

npm install --save-dev rollup-plugin-babel@latest
複製程式碼

建立 .babelrc

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ]
    ]
}
複製程式碼

更新 rollup.config.js

import babel from "rollup-plugin-babel";

export default {
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
  ],
};
複製程式碼

為了避免轉譯第三方指令碼，我們需要設定一個 exclude 的配置選項來忽略掉 node_modules 目錄

babel 7 必要模組

npm install --save-dev @babel/core

npm install --save-dev @babel/preset-env
複製程式碼

ESLint 檢查

在你的程式碼中使用 linter 無疑是十分好的決定，因為它會強制執行一致的編碼規範來幫助你捕捉像是漏掉了括弧這種棘手的 bug。

在這個專案中，我們將會使用 ESLint。

安裝模組

為了使用 ESLint，我們將要安裝 ESLint Rollup plugin

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

生成一個 .eslintrc.json

為了確保我們只獲取我們想要的錯誤，我們需要首先配置 ESLint。這裡可以通過下面的程式碼來自動生成大多數配置：

./node_modules/.bin/eslint --init
複製程式碼

更新 rollup.config.js

接下來，import ESLint 外掛並將它新增到 Rollup 配置中：

import eslint from 'rollup-plugin-eslint';

export default {
  plugins: [
    eslint({
      exclude: [
        throwOnError: true,
        throwOnWarning: true,
        include: ['src/**'],
        exclude: ['node_modules/**']
      ]
    }),
  ],
};
複製程式碼

eslint外掛有兩個屬性需要說明：throwOnError 和 throwOnWarning 設定為 true 時，如果在 eslint 的檢查過程中發現了 error 或warning，就會丟擲異常，阻止打包繼續執行（如果設定為false，就只會輸出eslint檢測結果，而不會停止打包）

相容 commonjs

npm 生態已經繁榮了多年，commonjs 規範作為 npm 的包規範，大量的 npm 包都是基於 commonjs 規範來開發的，因此在完美支援 es6 模組規範之前，我們仍舊需要相容 commonjs 模組規範。

rollup 提供了外掛 rollup-plugin-commonjs，以便於在 rollup 中引用 commonjs 規範的包。該外掛的作用是將 commonjs 模組轉成 es6 模組。

rollup-plugin-commonjs 通常與 rollup-plugin-node-resolve 一同使用，後者用來解析依賴的模組路徑。

安裝模組

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

更新 rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
    }),
  ],
};
複製程式碼

注意： jsnext 表示將原來的 node 模組轉化成 ES6 模組，main 和 browser 則決定了要將第三方模組內的哪些程式碼打包到最終檔案中。

替代環境變數

安裝模組

rollup-plugin-replace 本質上是一個用來查詢和替換的工具。它可以做很多事，但對我們來說只需要找到目前的環境變數並用實際值來替代就可以了。（例如：在 bundle 中出現的所有 ENV 將被 "production" 替換）

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

更新 rollup.config.js

配置很簡單：我們可以新增一個 key:value 的配對錶，key 值是準備被替換的鍵值，而 value 是將要被替換的值。

import replace from "rollup-plugin-replace";

export default {
  plugins: [
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV)
    })
  ]
};
複製程式碼

在我們的配置中找到每一個 ENV 並用 process.env.NODE_ENV 去替換，JSON.stringify 用來確保值是雙引號的，不像 ENV 這樣。

壓縮 bundle

新增 UglifyJS 可以通過移除註上釋、縮短變數名、重整程式碼來極大程度的減少 bundle 的體積大小 —— 這樣在一定程度降低了程式碼的可讀性，但是在網路通訊上變得更有效率。

安裝外掛

用下面的命令來安裝 rollup-plugin-uglify：

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

更新 rollup.config.js

接下來，讓我們在 Rollup 配置中新增 Uglify 。然而，為了在開發中使程式碼更具可讀性，讓我們來設定只在生產環境中壓縮混淆程式碼：

import uglify from "rollup-plugin-uglify";

export default {
  plugins: [
    process.env.NODE_ENV === "production" && uglify()
  ]
};
複製程式碼

這裡使用了短路計算策略，只有在 NODE_ENV 設定為 production 時載入 uglify()。

完整配置

最後附上我的 rollup.config.js 配置

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { eslint } from 'rollup-plugin-eslint';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';

const packages = require('./package.json');

const ENV = process.env.NODE_ENV;

const paths = {
    input: {
        root: ENV === 'example'
            ? 'example/index.js'
            : 'src/index.js',
    },
    output: {
        root: ENV === 'example'
            ? 'example/dist/'
            : 'dist/',
    },
};

const fileNames = {
    development: `${packages.name}.js`,
    example: `example.js`,
    production: `${packages.name}.min.js`
};

const fileName = fileNames[ENV];

export default {
    input: `${paths.input.root}`,
    output: {
        file: `${paths.output.root}${fileName}`,
        format: 'umd',
        name: 'bundle-name'
    },
    plugins: [
        resolve(),
        commonjs(),
        eslint({
            include: ['src/**'],
            exclude: ['node_modules/**']
        }),
        babel({
            exclude: 'node_modules/**',
            runtimeHelpers: true,
        }),
        replace({
            exclude: 'node_modules/**',
            ENV: JSON.stringify(process.env.NODE_ENV),
        }),
        (ENV === 'production' && uglify()),
    ],
};
複製程式碼

參考資料

rollup.js wiki zh

如何通過 Rollup.js 打包 JavaScript

rollup打包js的注意點

babel 7 教程

S打包工具rollup——完全入門指南

相關文章