webpack4.0各個擊破（8）—— tapable篇

webpack作為前端最火的構(gòu)建工具，是前端自動化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學(xué)習(xí)記錄，比較基礎(chǔ)，希望通過問題 + 解決方式的模式，以前端構(gòu)建中遇到的具體需求為出發(fā)點(diǎn)，學(xué)習(xí)webpack工具中相應(yīng)的處理辦法。（本篇中的參數(shù)配置及使用方式均基于webpack4.0版本）

一. tapable概述

tapable地址：【tapable-0.2】

tapable是webpack的核心框架（4.0以上版本的API已經(jīng)發(fā)生了變化），是一個基于事件流的框架，或者叫做發(fā)布訂閱模式，或觀察者模式，webpack的整個生命周期及其開放的自定義插件系統(tǒng)都離不開tapable的支持，研究其運(yùn)行原理是閱讀webpack源代碼的第一步。官方倉庫master分支的代碼是經(jīng)過ES6重構(gòu)的，模塊化拆分非常細(xì)，且加入了很多非核心邏輯，閱讀難度較大。建議先從官方倉庫中0.2版本的分支開始學(xué)習(xí)，整個源碼只有400行，相對容易理解。

二. tapable-0.2源碼解析

2.1 代碼結(jié)構(gòu)

//類定義
function Tapable() {
    this._plugins = {};
}
//模塊導(dǎo)出
module.exports = Tapable;
//定義了許多內(nèi)部方法和原型方法
...

Tapable實際上就是一個類定義的模塊。

2.2 事件監(jiān)聽方法

tapable通過原型方法Tapable.prototype.plugin來注冊事件監(jiān)聽。

這段代碼并不復(fù)雜，調(diào)用plugin方法來注冊一個事件，參考瀏覽器環(huán)境中的addEventListener()方法就很容易理解了。其邏輯就是將回調(diào)函數(shù)按照事件名稱進(jìn)行歸類存儲，在tapable實例中統(tǒng)一調(diào)度管理。

//__plugin屬性上掛載了各個注冊事件的回調(diào)函數(shù)
tapable.__plugins = {
   'click':[fn1, fn2, fn3],
   'mousedown':[fn21,fn22,fn23]
    ...
}

2.3 事件觸發(fā)方法

tapable提供了許多事件觸發(fā)的方式，其基本功能可以參考瀏覽器環(huán)境中的dispatchEvent( )。

tapable中的事件觸發(fā)方式可以按命名分為如下幾個大組：

• waterfall方法會將上一個監(jiān)聽的執(zhí)行結(jié)果傳給下一個
• bailResult方法只會執(zhí)行到第一個返回結(jié)果不是undefined的監(jiān)聽器
• Series方法會線性執(zhí)行異步監(jiān)聽器，上一個結(jié)束后下一個才會開始
• Parallel方法會并行執(zhí)行所有異步監(jiān)聽

tapable中的典型方法如下：

• Tapable.prototype.applyPlugins( )

  

  同步方法，該方法接受任意參數(shù)，以第一個參數(shù)為事件名查找監(jiān)聽器數(shù)組，依次執(zhí)行監(jiān)聽器的apply( )方法，觸發(fā)時將調(diào)用時除名稱以外的其他參數(shù)傳入apply( )方法。

• Tapable.prototype.applyPluginsWaterfall( )

同步方法，該方法接受任意參數(shù)，如果指定事件沒有注冊監(jiān)聽器，則返回第二個參數(shù)(init)，否則依次執(zhí)行監(jiān)聽器的apply( )方法，傳入的args是前一個執(zhí)行前一個監(jiān)聽器apply( )方法的返回值。瀑布流這個方法名很形象。

• Tapable.prototype.applyPluginsBailResult( )

同步方法，該方法接受任意參數(shù)，依次執(zhí)行監(jiān)聽器的apply( )方法并取得返回值，直到某個apply( )返回一個不為undefined的結(jié)果，則停止執(zhí)行并將這個結(jié)果返回。

• Tapable.prototype.applyPluginsAsync( )

異步執(zhí)行監(jiān)聽回調(diào)的方法。這個方法是順序執(zhí)行，等到第一個插件執(zhí)行結(jié)束后才會執(zhí)行下一個插件，實現(xiàn)的方式就是將下一個插件當(dāng)做回調(diào)函數(shù)傳入第一個插件，在第一個插件的apply( )方法的方法體最后（或是異步方法最后）來調(diào)用下一個監(jiān)聽插件的執(zhí)行。這里利用閉包實現(xiàn)了一個迭代器，變量記錄在applyPluginsAsync( )方法中（就是變量i）,并在回調(diào)中函數(shù)next( )中保持了對i的引用。

例如需要用applyPluginsAsync( )方法執(zhí)行的插件需要在apply方法中顯式執(zhí)行回調(diào)函數(shù)：

  class Plugin1{
    apply(info){
          var callback = Array.prototype.pop.call(arguments[1]);
          //這里取到的callback,實際上就是源碼中的具名函數(shù)next()
          callback();
    }
  }

其他的異步方法大同小異，不再贅述。

源碼的異步方法定義中使用copyProperties( )來處理兩個函數(shù)，筆者嘗試了很多情況這個方法都并未執(zhí)行，實際情況就是將next函數(shù)加入了參數(shù)數(shù)組并繼續(xù)執(zhí)行，希望對此有研究的讀者能夠點(diǎn)明一下。

三. tapable1.0概述

tapable地址：【tapable-1.0】

tapable在1.0版本做了很大改進(jìn)，使用ES6語法重寫了整個框架，除了更換了API外，在插件定義方面進(jìn)行了明顯升級，原來只通過plugin( )方法來定義插件，不閱讀源碼很難知道插件的規(guī)范格式，新版本的tapable提供了基本樣例，細(xì)分的事件鉤子(*Hook)，新的觸發(fā)事件的方法(tap,tapAsync,tapPromise)等等，但實現(xiàn)的基本需求是一致的，感興趣的讀者可以自行學(xué)習(xí)。