前言

除了打包模塊外，在打包過程中我們還會有各式各樣的需求，像是程式碼最小化，合併別人的庫 .....。也引此出現了各式各樣的外掛滿足我們的需求。

今天我們將會介紹rollup常用的外掛以及他們的用法

1. @rollup/plugin-buble外掛

在rollup.js打包的過程中進行程式碼編譯，將ES6+程式碼編譯成ES5標準

下載方式
npm install @rollup/plugin-buble --save-dev

配置範例:

import buble from '@rollup/plugin-buble'

export default {
  input: './src/vue/buble/index.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }],
  plugins: [
    resolve(),
    commonjs(),
    buble()
  ]
}

2. @rollup/plugin-alias外掛

提供 modules 名稱的 alias 和 reslove 功能，用過webpack的小夥伴應該對這個功能非常熟悉，首先在專案中引入alias外掛

下載方式
npm i -D @rollup/plugin-alias

 
 import alias from '@rollup/plugin-alias'
 import path from 'path'
 //這裡在前置教學有講過喔，這裡就不多介紹了
 const pathResolve = p => path.resolve(__dirname, p)

 export default {
   input: './src/vue/alias/index.js',
   output: [{
     file: './dist/index-plugin-es.js',
     format: 'es'
   }],
   plugins: [
     alias({
     '@': pathResolve('src')
     })
   ]
 }

3. rollup-plugin-flow-no-whitespace外掛

flow外掛用於在rollup.js打包過程中清除flow型別檢查部分的程式碼，我們修改rollup.plugin.config.js的input屬性：

下載方式
npm i -D rollup-plugin-flow-no-whitespace

配置範例:

import flow from 'rollup-plugin-flow-no-whitespace'

export default {
  input: './src/vue/flow/index.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }],
  plugins: [
    flow()
  ]
}

4. @rollup/plugin-replace外掛

類比 Webpack 的 DefinePlugin , 可在源碼中通過 process.env.NODE_ENV 用於構建區分 Development 與 Production 環境
程式碼使用了ES6了特性，所以需要引入buble外掛進行編譯
rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在源碼中通過 process.env.NODE_ENV 用於構建區分 Development 與 Production 環境.

下載方式
npm i -D @rollup/plugin-replace

import buble from '@rollup/plugin-buble'
import replace from '@rollup/plugin-replace'

export default {
  input: './src/vue/replace/index.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }],
  plugins: [
    replace({
    //__SAM__即為編譯過程中的動態變數
    __SAM__: true
    }),
    buble()
  ]
}

這裡我們看一下__SAM__到底怎麼去使用

const a = 1
let b = 2
if (__SAM__) { // 使用replace值__SAM__，注意這個值沒有定義，如果直接執行會報錯
console.log(`__SAM__,${a},${b}`) // 使用__SAM__，打包時會被替換
}

5. rollup-plugin-terser外掛

terser外掛幫助我們在rollup.js打包過程中實現程式碼壓，通常會放在plugin的最後面

下載方式
npm i -D rollup-plugin-terser

配置範例

import { terser } from 'rollup-plugin-terser'


const pathResolve = p => path.resolve(__dirname, p)

export default {
  input: './src/vue/replace/index.js',
  output: [{
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    terser({
      output: {
      ascii_only: true // 僅輸出ascii字元
    },
    compress: {
      pure_funcs: ['console.log'] // 去掉console.log函式
    }
    }),
  ]
}

6. rollup-plugin-node-resolve外掛

整合外部模組程式碼，將我們編寫的原始碼與依賴的第三方庫進行合併，使用者在引用我們庫的時候，就不需要手動去下載這個庫所有的依賴

import resolve from 'rollup-plugin-node-resolve'

export default {
  input: './src/plugin/main.js',
  output: [
  {
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve()
  ]
}

下載方式
npm install --save-dev rollup-plugin-node-resolve

總結

今天先介紹到這邊，明天將會把所有常見的rollup外掛介紹完，並開始時做我們的第一個Javascript開源庫。

參考資料

• rollup官網 (https://rollupjs.org/)
• 10分鐘快速入門rollup.js(https://www.itread01.com/qexxq.html)
• 10分鐘快速進階rollup.js(https://www.itread01.com/qqhkpf.html)
• Rollup打包工具的使用（超詳細，超基礎，附代碼截圖超簡單）rollup（下一代ES模塊捆綁器）(https://juejin.im/post/6844904058394771470)