一. tapable概述tapable地址：【tapable-0.2】
tapable是webpack的核心框架（4.0以上版本的API已經(jīng)發(fā)生了變化），是一個(gè)基于事件流的框架，或者叫做發(fā)布訂閱模式，或觀察者模式，webpack的整個(gè)生命周期及其開放的自定義插件系統(tǒng)都離不開tapable的支持，研究其運(yùn)行原理是閱讀webpack源代碼的第一步。官方倉庫master分支的代碼是經(jīng)過ES6重構(gòu)的，模塊化拆分非常細(xì)，且加入了很多非核心邏輯，閱讀難度較大。建議先從官方倉庫中0.2版本的分支開始學(xué)習(xí)，整個(gè)源碼只有400行，相對容易理解。
二. tapable-0.2源碼解析2.1 代碼結(jié)構(gòu)//類定義
function Tapable() {
this._plugins = {};
}
//模塊導(dǎo)出
module.exports = Tapable;
//定義了許多內(nèi)部方法和原型方法
...Tapable實(shí)際上就是一個(gè)類定義的模塊。
2.2 事件監(jiān)聽方法tapable通過原型方法Tapable.prototype.plugin來注冊事件監(jiān)聽。
這段代碼并不復(fù)雜，調(diào)用plugin方法來注冊一個(gè)事件，參考瀏覽器環(huán)境中的addEventListener()方法就很容易理解了。其邏輯就是將回調(diào)函數(shù)按照事件名稱進(jìn)行歸類存儲(chǔ)，在tapable實(shí)例中統(tǒng)一調(diào)度管理。 //__plugin屬性上掛載了各個(gè)注冊事件的回調(diào)函數(shù)
tapable.__plugins = {
'click':[fn1, fn2, fn3],
'mousedown':[fn21,fn22,fn23]
...
}2.3 事件觸發(fā)方法tapable提供了許多事件觸發(fā)的方式，其基本功能可以參考瀏覽器環(huán)境中的dispatchEvent( )。
tapable中的事件觸發(fā)方式可以按命名分為如下幾個(gè)大組：
waterfall方法會(huì)將上一個(gè)監(jiān)聽的執(zhí)行結(jié)果傳給下一個(gè) bailResult方法只會(huì)執(zhí)行到第一個(gè)返回結(jié)果不是undefined的監(jiān)聽器 Series方法會(huì)線性執(zhí)行異步監(jiān)聽器，上一個(gè)結(jié)束后下一個(gè)才會(huì)開始 Parallel方法會(huì)并行執(zhí)行所有異步監(jiān)聽
tapable中的典型方法如下：
同步方法，該方法接受任意參數(shù)，以第一個(gè)參數(shù)為事件名查找監(jiān)聽器數(shù)組，依次執(zhí)行監(jiān)聽器的apply( )方法，觸發(fā)時(shí)將調(diào)用時(shí)除名稱以外的其他參數(shù)傳入apply( )方法。 
同步方法，該方法接受任意參數(shù)，如果指定事件沒有注冊監(jiān)聽器，則返回第二個(gè)參數(shù)(init)，否則依次執(zhí)行監(jiān)聽器的apply( )方法，傳入的args是前一個(gè)執(zhí)行前一個(gè)監(jiān)聽器apply( )方法的返回值。瀑布流這個(gè)方法名很形象。 
同步方法，該方法接受任意參數(shù)，依次執(zhí)行監(jiān)聽器的apply( )方法并取得返回值，直到某個(gè)apply( )返回一個(gè)不為undefined的結(jié)果，則停止執(zhí)行并將這個(gè)結(jié)果返回。 
異步執(zhí)行監(jiān)聽回調(diào)的方法。這個(gè)方法是順序執(zhí)行，等到第一個(gè)插件執(zhí)行結(jié)束后才會(huì)執(zhí)行下一個(gè)插件，實(shí)現(xiàn)的方式就是將下一個(gè)插件當(dāng)做回調(diào)函數(shù)傳入第一個(gè)插件，在第一個(gè)插件的apply( )方法的方法體最后（或是異步方法最后）來調(diào)用下一個(gè)監(jiān)聽插件的執(zhí)行。這里利用閉包實(shí)現(xiàn)了一個(gè)迭代器，變量記錄在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í)際上就是源碼中的具名函數(shù)next()
callback();
}
}其他的異步方法大同小異，不再贅述。 源碼的異步方法定義中使用copyProperties( )來處理兩個(gè)函數(shù)，筆者嘗試了很多情況這個(gè)方法都并未執(zhí)行，實(shí)際情況就是將next函數(shù)加入了參數(shù)數(shù)組并繼續(xù)執(zhí)行，希望對此有研究的讀者能夠點(diǎn)明一下。 三. tapable1.0概述tapable地址：【tapable-1.0】
tapable在1.0版本做了很大改進(jìn)，使用ES6語法重寫了整個(gè)框架，除了更換了API外，在插件定義方面進(jìn)行了明顯升級(jí)，原來只通過plugin( )方法來定義插件，不閱讀源碼很難知道插件的規(guī)范格式，新版本的tapable提供了基本樣例，細(xì)分的事件鉤子(*Hook)，新的觸發(fā)事件的方法(tap,tapAsync,tapPromise)等等，但實(shí)現(xiàn)的基本需求是一致的，感興趣的讀者可以自行學(xué)習(xí)。
作者：大史不說話
鏈接：Webpack4.0各個(gè)擊破（8）tapable篇
來源：博客園
|
