rollup入門介紹

antwang發表於2018-04-13
原文網址 : https://juejin.im/post/5ad0eacff265da239a603b05

介紹

rollup採用es6原生的模組機制進行模組的打包構建，rollup更著眼於未來，對commonjs模組機制不提供內建的支援，是一款更輕量的打包工具。本文從實踐的角度對rollup做一個基礎的入門介紹, 有問題也歡迎大家一起來探討。

安裝

在本地開發環境安裝rollup。

npm i rollup -D
複製程式碼

使用

使用方法與webpack非常相似，通常都是命令列來實現打包，當然在實際的應用中，我們經常使用npm script 進行包裝。

在src目錄下有foo.js ：

// src/foo.js
export default 'hello world!';

複製程式碼

和作為入口檔案的main.js:

// src/main.js
import foo from './foo.js';
export default function () {
  console.log(foo);
}

複製程式碼

在專案根目錄下使用rollup對main.js進行打包：

rollup src/main.js --o dist/bundle.js --f cjs
複製程式碼

上面的命令表示rollup對main.js進行打包，--o引數指定了打包後的檔名及存放目錄。--f引數指定打包構建後的檔案是commonjs規範的檔案。

使用配置檔案

在命令列中通過引數形式去設定rollup的行為，不是很方便。如webpack一樣，我們通常使用一個rollup.config.js的配置檔案來更靈活地定製rollup的行為。 上述命令列實現的功能我們可以在配置檔案中這樣配置：

// rollup.config.js

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

複製程式碼

此外，我們在package.json中封裝一個npm script：

"scripts": {
    "build": "rollup -c"
}
複製程式碼

-c引數指定rollup構建時使用的配置檔案，如果預設的話，預設會使用根目錄下的rollup.config.js。

在終端中執行命令：

npm run build
複製程式碼

搭配babel

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

這種強需求，rollup當然提供瞭解決方案。 首先是安裝rollup-plugin-babel，該外掛將rollup和babel進行了完美結合。

npm i -D rollup-plugin-babel
複製程式碼

在rollup.config.js中配置如下：

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    babel({
      // babelrc: false,
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
複製程式碼

同時在babel的配置檔案.babelrc中配置如下：

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ],
  "plugins": ["external-helpers"]
}
複製程式碼

我們用到了babel的一個功能集env,和external-helpers外掛。babel會按照env和external-helpers指定的功能去完成編譯工作。 配置"modules": false是因為rollup會處理es6模組語法，其餘的es6語法才由babel處理。 external-helpers, 是為了避免在每個模組的頭部重複引用相同的"helpers"方法，只需要在構建完的bundle頭部引入一次就夠了。

當然使用之前我們得先安裝：

npm i -D babel-preset-env babel-plugin-external-helpers
複製程式碼

貌似還需要安裝 babel-core

相容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中進行配置：

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
複製程式碼

tree shaking

tree shaking是rollup除es6模組外的另一個核心賣點，當然這個特性在webpack中也有實現。tree shaking的優點毋庸多言了，結合es6模組，對程式碼進行靜態分析，能更有效地剔除冗餘的程式碼，減小js檔案的大小。一句話，大家多多使用就對了。

總結

號稱下一代打包工具的rollup基於es6模組系統，同時支援tree shaking，配置上相對輕量。針對js庫級別的應用非常適合使用rollup。對應業務場景豐富的應用，如需要各種loader來處理圖片、css、字型等、需要按需載入，程式碼分割還是webpack更適合。大家可以視具體應用場景選擇。

相關文章