Rollup —— 適合框架和類庫使用的模塊打包器

目錄

  • Rollup概述html

    • Rollup vs Webpack
  • 快速上手
  • 配置文件
  • 插件前端

    • rollup-plugin-json
    • rollup-plugin-node-resolve(加載npm模塊)
    • rollup-plugin-commonjs
  • Code Splitting(代碼拆分)node

    • Dynamic Imports(動態導入)
  • 多入口打包webpack

    • amd輸出格式要注意什麼?
  • 指令參數參考大全

這篇文章目前旨在簡單瞭解Rollup是什麼而且如何上手操做,以後會再進行深刻分析。git

Rollup概述

Rollup僅僅是一款JavaScript 模塊打包器,也稱爲ESM打包器,並無像webpack那樣有不少其餘額外的功能,它能夠將項目中散落的細小模塊打包成整塊的代碼,可讓他們更好的運行在瀏覽器環境 or Node.js環境 ,目前Vue2.0源碼使用的打包器就是Rollupgithub

Rollup vs Webpack

RollupWebpack做用相似,可是Rollup更爲小巧,webpack能夠在前端開發中完成前端工程化的絕大多數功能,而Rollup僅僅是一款ESM打包器,並無其餘額外的功能。web

Rollup中並不支持相似HMR這種高級特性。可是Rollup誕生的目的並非要與webpack全面競爭,其初衷只是提供一個高效的ES Modules的打包器,充分利用ESM的各項特性構建出結構比較扁平,性能比較出衆的類庫。npm

快速上手

  1. 下載模板 Rollup-firstdemo-temp
  2. 安裝模塊npm i rollup -g
  3. 在命令行中執行rollup ./src/index.js --format iife --file dist/bundle.js能夠看到在輸出目錄中有了一個文件夾,裏面的文件輸出的文件很乾淨整潔,而且沒有引用的模塊並無打包進去(自帶Tree-shaking
  • --format —— 指定輸出文件打包格式,例如:iife是自調用函數
  • --file —— 輸出文件,後面跟打印路徑,不寫會打印到控制檯

配置文件

建立名稱爲rollup.config.js文件,一樣運行在node.js環境中,由於Rollup會單獨處理這個文件,因此咱們能夠直接使用ES Modulejson

  1. 在文件中編輯
// rollup.config.js
// 這個文件中會導出一個配置對象
export default {
  // input 是打包入口文件路徑
  input: 'src/index.js',
  // 輸出配置
  output: {、
    // 輸出路徑及文件名
    file: 'dist/bundle.js',
    // 輸出格式
    format: 'iife'
  }
}
  1. 使用命令行要添加--config說要使用配置文件rollup --config,默認是不使用配置文件的。
  2. rollup --config <filename>後面能夠指定配置文件的名稱,默認是rollup.config.js,也能夠本身指定別的文件名。

插件

若是要加載其餘類型的資源文件,或者是導入CommonJS模塊,或者編譯ES6新特性,Rollup一樣支持使用插件的方式擴展。前端工程化

插件是Rollup惟一擴展途徑,這個與webpack有所不一樣,webpackpluginsmoduleoptimization三種途徑。

rollup-plugin-json

rollup-plugin-json是一個導入JSON文件的插件。

  1. 安裝插件 npm i rollup-plugin-josn --save-dev
  2. rollup-plugin.js中配置插件
// 默認導出是一個插件函數
import json from 'rollup-plugin-json'
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    // 是調用結果放在數組中,而不是函數放進去
    json()
  ]
}
  1. src/index.js中調用,打包以後能夠看到json裏面的變量已經打包進來了。
// 導入模塊成員
import { log } from './logger'
import { name, version} from '../package.json'

log(name) // var name = "first";
log(version) // var version = "1.0.0";

rollup-plugin-node-resolve(加載npm模塊)

rollup默認只能按照路徑的方式加載本地模塊,對於第三方模塊並不能想webpack同樣經過名稱導入,因此須要經過插件處理。

  1. 安裝插件 npm i rollup-plugin-node-resolve --save-dev
  2. rollup-plugin.js中配置插件
// 默認導出是一個插件函數
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
export default {
  ...
  plugins: [
    // 是調用結果放在數組中,而不是函數放進去
    json(),
    resolve()
  ]
}
  1. 準備一個第三方模塊進行安裝npm i lodash-es
  2. src/index.js中調用,能夠看到lodash-es的相關代碼也導入進去了
// 導入模塊成員,這裏可使用node名稱來導入而不是路徑
import _ from 'lodash-es'
import { log } from './logger'

log(_.camelCase('hello world'))
PS:
這裏使用 lodashES Modules版本而不是其餘版本的緣由是由於 rollup默認只能處理 ES Modules模塊,若是要引用其餘版本咱們須要作額外的處理。

rollup-plugin-commonjs

加載CommonJS模塊,目前仍是有大量的npm模塊使用CommonJS的方式導入成員,爲了兼容就有了這個官方插件。

  1. 安裝插件npm i rollup-plugin-commonjs --save-dev
  2. rollup-plugin.js中配置插件
import commonjs from 'rollup-plugin-commonjs'
export default {
  ...
  plugins: [
    commonjs()
  ]
}
  1. 在src中新建文件cjs.module.js,編寫文件
module.exports = {
  foo: bar
}
  1. src/index.js中引入,能夠看到變量已經打包進去。
// 導入模塊成員
import { log } from './logger'
import cjs from './cjs.module'

log(cjs)

/* var cjs_module = {
    foo: bar
  };
*/

Code Splitting(代碼拆分)

Dynamic Imports(動態導入)

動態導入,rollup內部會自動處理代碼分包,
代碼拆分

  1. src/index.js中引入
// import函數返回一個promise對象
// then方法參數是module,因爲模塊導出的成員都會放在module對象中,因此能夠經過解構的方式提取log
import('./logger').then(({ log }) => {
  log('code splitting~')
})
  1. 修改roll.config.jsoutput裏面的配置
export default {
  // input 是打包入口文件路徑
  input: 'src/index.js',
  // 輸出配置
  output: {
    // 輸出目錄名稱
    dir: 'dist',
    // 輸出格式
    format: 'amd'
  }
}
不修改配置文件直接運行 rollup --config會報錯

UMDiife 是不支持代碼拆分方式格式,由於自執行函數會把全部的模塊都放到一個函數中,並無像webpack同樣有一些引導代碼,因此沒有辦法作到代碼拆分

若是要使用代碼拆分,就須要使用AMD or CommonJS等方式。在瀏覽器中只能使用AMD的方式,因此這裏改用輸出格式爲AMD

何況咱們拆分代碼輸出不一樣的文件,file屬性只是針對一個文件,因此咱們須要改用dir去指定文件夾名稱,否則仍是會報錯

  1. 運行代碼rollup --config能夠看到dist文件夾裏面有兩個拆分打包的文件。

多入口打包

rollup支持多入口打包,對於不一樣文件的公共部分也會自動提取到單個文件中做爲獨立的bundle.js

  1. 模板中將多入口打包的代碼開啓,能夠看到albumindex都引用了fetch.jslogger.js的代碼,咱們對rollup.config.js進行修改
export default {
  // 這裏input要改爲數組形式或者對象形式,對象形式能夠修改打包的文件名,鍵對應的就是打包的文件名
  // input: ['src/index.js', 'src/album.js'],
  input: {
    indexjs: 'src/index.js',
    albumjs: 'src/album.js'
  },
  // 輸出配置要改爲拆分包的配置,覺得多入口打包默認會執行打包拆分的特性。因此輸出格式要改爲amd
  output: {
    dir: 'dist',
    format: 'amd'
  }
}
  1. 命令行執行rollup --config 能夠看到dist裏面生成了三個文件,其中兩個文件打包和一個公共模塊的打包,裏面包含了loggerfetch模塊

amd輸出格式要注意什麼?

對於amd輸出格式的打包文件是不能直接引用到頁面上,必須經過實現AMD標準的庫去加載。

嘗試使用一下

  1. dist下面生成一個HTML文件,嘗試引入requirejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <!--requirejs的cdn地址,data-main是入口文件的名稱-->
  <script src="https://unpkg.com/requirejs@2.3.6/bin/r.js" data-main="albumjs.js"></script>
</body>
</html>
  1. 瀏覽器打開能夠看到內容正常引入,控制檯也正常工做。

指令參數參考大全

  • --format —— 指定輸出文件打包格式,例如:iife是自調用函數
  • --file —— 輸出文件,後面跟打印路徑,不寫會打印到控制檯
  • --config —— 指定使用配置文件,後面能夠加指定配置文件的名稱,rollup --config <filename>,默認是rollup.config.js
相關文章
相關標籤/搜索