解讀 rollup Plugin （一）

這是我參與更文挑戰的第 17 天，活動詳情查看： 更文挑戰

Lynne，一個能哭愛笑永遠少女心的前端開發工程師。身處互聯網浪潮之中，熱愛生活與技術。

終於有時間對rollup plugin 下手了~~~

儘管對於rollup的插件編寫，官網上對於插件的介紹幾乎都是英文，學習起來不是很友好, 例子也相對較少，但目前針對 rollup插件的分析與開發指南的文章已經很多見，以關於官方英文文檔的翻譯與函數鉤子的分析爲主。

講道理，稀裏糊塗直接看源碼分析只會分分鐘勸退我，而我只想分分鐘寫個 rollup 插件而已~~

爲了打卡，一篇文章要拆分了QAQ

理解 rollup plugin

引用官網的解釋：

Rollup插件是一個具備下面描述的一個或多個屬性、構建鉤子和輸出生成鉤子的對象，它遵循咱們的約定。 一個插件應該做爲一個包來分發，該包導出一個能夠用插件特定選項調用的函數，並返回這樣一個對象。 插件容許你定製Rollup的行爲，例如，在捆綁以前編譯代碼，或者在你的node_modules文件夾中找到第三方模塊。

簡單來講，rollup的插件是一個普通的函數，函數返回一個對象，該對象包含一些屬性(如name)，和不一樣階段的鉤子函數（構建build和輸出output階段），此處應該回顧下上面的流程圖。

關於約定

• 插件應該有一個帶有rollup-plugin-前綴的明確名稱。
• 在package.json中包含rollup-plugin關鍵字。
• 插件應該支持測試，推薦 mocha 或者 ava 這類開箱支持 promises 的庫。
• 儘量使用異步方法。
• 用英語記錄你的插件。
• 確保你的插件輸出正確的 sourcemap。
• 若是你的插件使用 'virtual modules'（好比幫助函數），給模塊名加上 \0 前綴。這能夠阻止其餘插件執行它。

分分鐘寫個 rollup 插件

爲了保持學習下去的熱情與動力，先舉個栗子壓壓驚，若是看到插件實現的各類源碼函數鉤子部分以爲腦子不清醒了，歡迎隨時回來從新看這一小節，重拾勇氣與信心！

插件其實很簡單

能夠打開rollup 插件列表，隨便找個你感興趣的插件，看下源代碼。

有很多插件都是幾十行，不超過100行的。好比圖片文件多格式支持插件@rollup/plugin-image的代碼甚至不超過50行，而將json文件轉換爲ES6模塊的插件@rollup/plugin-json源代碼更少。

一個例子

// 官網的一個例子
export default function myExample () {
  return {
    name: 'my-example', // 名字用來展現在警告和報錯中
    resolveId ( source ) {
      if (source === 'virtual-module') {
        return source; // rollup 不該該查詢其餘插件或文件系統
      }
      return null; // other ids 正常處理
    },
    load ( id ) {
      if (id === 'virtual-module') {
        return 'export default "This is virtual!"'; // source code for "virtual-module"
      }
      return null; // other ids
    }
  };
}

// rollup.config.js
import myExample from './rollup-plugin-my-example.js';
export default ({
  input: 'virtual-module', // 經過上述插件處理
  plugins: [myExample()],
  output: [{
    file: 'bundle.js',
    format: 'es'
  }]
});
複製代碼

光看不練假把式，模仿寫一個：

// 本身編的一個例子QAQ
export default function bundleReplace () {
  return {
    name: 'bundle-replace', // 名字用來展現在警告和報錯中
    transformBundle(bundle) {
      return bundle
        .replace('關鍵詞', '替換內容')
        .replace(/正則/, '替換內容');
    },
  };
}

// rollup.config.js
import bundleReplace from './rollup-plugin-bundle-replace.js';
export default ({
  input: 'src/main.js', // 通用入口文件
  plugins: [bundleReplace()],
  output: [{
    file: 'bundle.js',
    format: 'es'
  }]
});
複製代碼

嘿！這也不難嘛~~~