rollup入門介紹

介紹

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更適合。你們能夠視具體應用場景選擇。