起因
想研究一下Webpack執行原理，發現都提到了tapable，搞得我雲裡霧裡，那我們就好好研究一番，這到底是個啥庫。
在Webpack官方文件上，檢視Webpack的宣告週期鉤子函式，可以看到下圖的內容：
可以看到run函式是AsyncSeriesHook型別的鉤子函式，這個就是tapable提供的鉤子型別了。
想理解Webpack的執行流程，先要了解這個鉤子的使用，近而瞭解Webpack在執行的過程中，是如何呼叫各種外掛的。
開始研究
先搭建一個最簡單的專案
依照慣例，我們先搭建個最簡單的專案：
安裝必要的庫：
npm install --save-dev wepback
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save tapable
複製程式碼我們在src下寫我們的測試程式碼，然後執行起來，看我們的實驗結果。 webpack.config.js的配置如下：
module.exports = {
entry: {
index: __dirname + "/src/index.js",
},
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
filename: "[name].js", //打包後輸出檔案的檔名
chunkFilename: '[name].js',
},
mode: 'development',
devtool: false,
devServer: {
contentBase: "./dist",//本地伺服器所載入的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true//實時重新整理
},
}
複製程式碼在package.json中配置好啟動指令碼，使用npm run server即可檢視執行結果：
"scripts": {
"start": "webpack",
"server": "webpack-dev-server --open"
},
複製程式碼同步鉤子
第一個鉤子 SyncHook
tapable的github地址是：github.com/webpack/tap…
這裡給出的是tapable-1分支的地址，我看這個分支才是Webpack現在使用的。
依照它readme.md中介紹，tapable暴露了很多的Hook類，可以幫助我們為外掛建立鉤子。
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
複製程式碼這麼多Hook，我們一個一個來，先看看SyncHook怎麼使用，在index.js中寫下：
import { SyncHook } from 'tapable';
const hook = new SyncHook(); // 建立鉤子物件
hook.tap('logPlugin', () => console.log('被勾了')); // tap方法註冊鉤子回撥
hook.call(); // call方法呼叫鉤子，列印出‘被勾了’三個字
複製程式碼使用npm run server，在瀏覽器中執行成功。也成功列印‘被勾了’。用起來 還是很簡單的。
這就是經典的事件註冊和觸發機制啊。實際使用的時候，宣告事件和觸發事件的程式碼通常在一個類中，註冊事件的程式碼在另一個類（我們的外掛）中。程式碼如下：
// Car.js
import { SyncHook } from 'tapable';
export default class Car {
constructor() {
this.startHook = new SyncHook();
}
start() {
this.startHook.call();
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.startHook.tap('startPlugin', () => console.log('我係一下安全帶'));
car.start();
複製程式碼鉤子的使用基本就是這個意思，Car中只負責宣告和呼叫鉤子，真正的執行邏輯，不再Car中，而是在註冊它的index.js之中，是在Car之外。這樣就做到了很好的解耦。
對於Car而言，通過這種註冊外掛的方式，豐富自己的功能。
向外掛傳遞引數
我希望這樣：
// index.js
import Car from './Car';
const car = new Car();
car.accelerateHook.tap('acceleratePlugin', (speed) => console.log(`加速到${speed}`));
car.accelerate(100); // 呼叫時，將100傳給外掛回撥的speed
複製程式碼可以這樣寫Car類：
import { SyncHook } from 'tapable';
export default class Car {
constructor() {
this.startHook = new SyncHook();
this.accelerateHook = new SyncHook(["newSpeed"]); // 在宣告的時候，說明我這個Hook需要一個引數即可。
}
start() {
this.startHook.call();
}
accelerate(speed) {
this.accelerateHook.call(speed);
}
}
複製程式碼這樣就完成了帶引數的Hook，SyncHook引數是傳遞個陣列，就是說也可以讓我們傳遞多個引數，如 new SyncHook(["arg1","arg2","arg3"])。這樣在call的時候也可以傳遞三個引數，在回撥函式，也能接收到call的三個引數。
我們的Car類，就是一個Tapable類，事件的宣告和呼叫中心。
第二個鉤子 SyncBailHook
Hook的註冊/呼叫機制我們大致瞭解了，SyncHook的工作很完美，但是tapable還提供了很多Hook，這些Hook又是解決什麼問題的呢？
原因在於對於某一個事件，我們可以註冊多次，如下：
const car = new Car();
car.hooks.brake.tap('brakePlugin1', () => console.log(`剎車1`));
car.hooks.brake.tap('brakePlugin2', () => console.log(`剎車2`));
car.hooks.brake.tap('brakePlugin3', () => console.log(`剎車3`));
car.brake(); // 會列印‘剎車1’‘剎車2’‘剎車3’
複製程式碼這裡我們為Car類新增了hooks.brake的鉤子，和一個brake方法。brake的鉤子被註冊了3次，我們呼叫brake方式的時候，3個外掛都接受到了事件。
我們稍微重構了一下Car類，據說這種寫法，更符合tapable使用的最佳實踐，其實就是將鉤子都放到一個hooks欄位裡。Car程式碼如下：
import { SyncHook, SyncBailHook } from 'tapable';
export default class Car {
constructor() {
this.hooks = {
start: new SyncHook(),
accelerate: new SyncHook(["newSpeed"]),
brake: new SyncBailHook(), // 這裡我們要使用SyncBailHook鉤子啦
};
}
start() {
this.hooks.start.call();
}
accelerate(speed) {
this.hooks.accelerate.call(speed);
}
brake() {
this.hooks.brake.call();
}
}
複製程式碼我們現在要滿足這樣一個需求，不管你註冊多少外掛，我只想被剎兩次，就不通知別的外掛了。這時候就SyncBailHook就可以，程式碼如下：
import Car from './Car';
const car = new Car();
car.hooks.brake.tap('brakePlugin1', () => console.log(`剎車1`));
// 只需在不想繼續往下走的外掛return非undefined即可。
car.hooks.brake.tap('brakePlugin2', () => { console.log(`剎車2`); return 1; });
car.hooks.brake.tap('brakePlugin3', () => console.log(`剎車3`));
car.brake(); // 只會列印‘剎車1’‘剎車2’
複製程式碼SyncBailHook就是根據每一步返回的值來決定要不要繼續往下走，如果return了一個非undefined的值 那就不會往下走，注意 如果什麼都不return 也相當於return了一個undefined。
由此推測，tabable提供各類鉤子，目的是處理這些外部外掛的關係。
第三個鉤子 SyncWaterfallHook
搞明白了第二個鉤子，接下來的鉤子就很好理解了，這裡直接給出SyncWaterfallHook的定義：它的每一步都依賴上一步的執行結果，也就是上一步return的值就是下一步的引數。
我們改造一下accelerate鉤子為SyncWaterfallHook：
import { SyncHook, SyncBailHook, SyncWaterfallHook } from 'tapable';
export default class Car {
constructor() {
this.hooks = {
start: new SyncHook(),
accelerate: new SyncWaterfallHook(["newSpeed"]), // 重點在這裡
brake: new SyncBailHook(),
};
}
start() {
this.hooks.start.call();
}
accelerate(speed) {
this.hooks.accelerate.call(speed);
}
brake() {
this.hooks.brake.call();
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.hooks.accelerate.tap('acceleratePlugin1', (speed) => { console.log(`加速到${speed}`); return speed + 100; });
car.hooks.accelerate.tap('acceleratePlugin2', (speed) => { console.log(`加速到${speed}`); return speed + 100; });
car.hooks.accelerate.tap('acceleratePlugin3', (speed) => { console.log(`加速到${speed}`); });
car.accelerate(50); // 列印‘加速到50’‘加速到150’‘加速到250’
複製程式碼第四個鉤子 SyncLoopHook
SyncLoopHook是同步的迴圈鉤子，它的外掛如果返回一個非undefined。就會一直執行這個外掛的回撥函式，直到它返回undefined。
我們把start的鉤子改成SyncLoopHook。
import { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook } from 'tapable';
export default class Car {
constructor() {
this.hooks = {
start: new SyncLoopHook(), // 重點看這裡
accelerate: new SyncWaterfallHook(["newSpeed"]),
brake: new SyncBailHook(),
};
}
start() {
this.hooks.start.call();
}
accelerate(speed) {
this.hooks.accelerate.call(speed);
}
brake() {
this.hooks.brake.call();
}
}
複製程式碼// index.js
import Car from './Car';
let index = 0;
const car = new Car();
car.hooks.start.tap('startPlugin1', () => {
console.log(`啟動`);
if (index < 5) {
index++;
return 1;
}
}); // 這回我們得到一輛破車，啟動6次才會啟動成功。
car.hooks.start.tap('startPlugin2', () => {
console.log(`啟動成功`);
});
car.start(); // 列印‘啟動’6次，列印‘啟動成功’一次。
複製程式碼非同步鉤子
當外掛的回撥函式，存在非同步的時候。就需要使用非同步的鉤子了。
第五個鉤子 AsyncParallelHook
AsyncParallelHook處理非同步並行執行的外掛。
我們在Car類中新增calculateRoutes，使用AsyncParallelHook。再寫一個calculateRoutes方法，呼叫callAsync方法時會觸發鉤子執行。這裡可以傳遞一個回撥，當所有外掛都執行完畢的時候，被呼叫。
// Car.js
import {
...
AsyncParallelHook,
} from 'tapable';
export default class Car {
constructor() {
this.hooks = {
...
calculateRoutes: new AsyncParallelHook(),
};
}
...
calculateRoutes(callback) {
this.hooks.calculateRoutes.callAsync(callback);
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.hooks.calculateRoutes.tapAsync('calculateRoutesPlugin1', (callback) => {
setTimeout(() => {
console.log('計算路線1');
callback();
}, 1000);
});
car.hooks.calculateRoutes.tapAsync('calculateRoutesPlugin2', (callback) => {
setTimeout(() => {
console.log('計算路線2');
callback();
}, 2000);
});
car.calculateRoutes(() => { console.log('最終的回撥'); }); // 會在1s的時候列印‘計算路線1’。2s的時候列印‘計算路線2’。緊接著列印‘最終的回撥’
複製程式碼我覺得AsyncParallelHook的精髓就在於這個最終的回撥。當所有的非同步任務執行結束後，再最終的回撥中執行接下來的程式碼。可以確保所有的外掛的程式碼都執行完畢後，再執行某些邏輯。如果不需要這個最終的回撥來執行某些程式碼，那使用SyncHook就行了啊，反正你又不關心外掛中的程式碼什麼時候執行完畢。
AsyncParallelHook的Promise方式
除了使用tapAsync/callAsync的方式使用AsyncParallelHook。還可以使用tapPromise/promise的方式。
程式碼如下：
// Car.js
import {
SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook,
AsyncParallelHook,
} from 'tapable';
export default class Car {
constructor() {
this.hooks = {
...
calculateRoutes: new AsyncParallelHook(),
};
}
...
calculateRoutes() {
return this.hooks.calculateRoutes.promise();
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin1', () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線1');
resolve();
}, 1000);
});
});
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin2', () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線2');
resolve();
}, 2000);
});
});
car.calculateRoutes().then(() => { console.log('最終的回撥'); });
複製程式碼只是用法上有區別，效果同tapAsync/callAsync一樣的。
第六個鉤子 AsyncParallelBailHook
這個我靠猜都知道它是怎麼回事了，外掛都並行執行，有一個執行成功並且傳遞的值不是undefined，就呼叫最終的回撥。
來驗證一下猜想：
// Car.js
import {
AsyncParallelBailHook,
} from 'tapable';
export default class Car {
constructor() {
this.hooks = {
drift: new AsyncParallelBailHook(),
};
}
drift(callback) {
this.hooks.drift.callAsync(callback);
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.hooks.drift.tapAsync('driftPlugin1', (callback) => {
setTimeout(() => {
console.log('計算路線1');
callback(1); // 這裡傳遞個1，不是undefined
}, 1000);
});
car.hooks.drift.tapAsync('driftPlugin2', (callback) => {
setTimeout(() => {
console.log('計算路線2');
callback(2); // 這裡傳遞個2，不是undefined
}, 2000);
});
car.drift((result) => { console.log('最終的回撥', result); });
// 列印結果是，等1s列印'計算路線1' ，馬上列印‘最終的回撥 1’，再到第2s，列印'計算路線2'
複製程式碼我們來分析下列印結果，說明AsyncParallelBailHook在外掛呼叫callback時，如果給callback傳引數，就會立馬呼叫最終的回撥函式。但並不會阻止其他外掛繼續執行自己的非同步，只不過最終的回撥拿不到這些比較慢的外掛的回撥結果了。
同樣的AsyncParallelBailHook也有promise的呼叫方式，與AsyncParallelHook類似，我們們就不實驗了。
第七個鉤子 AsyncSeriesHook
說完了並行，那一定有序列。就是外掛一個一個的按順序執行。
實驗程式碼如下：
// Car.js
import {
AsyncSeriesHook,
} from 'tapable';
export default class Car {
constructor() {
this.hooks = {
calculateRoutes: new AsyncSeriesHook(),
};
}
calculateRoutes() {
return this.hooks.calculateRoutes.promise();
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin1', () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線1');
resolve();
}, 1000);
});
});
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin2', () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線2');
resolve();
}, 2000);
});
});
car.calculateRoutes().then(() => { console.log('最終的回撥'); });
// 1s過後，列印計算路線1，再過2s（而不是到了第2s，而是到了第3s），列印計算路線2，再立馬列印最終的回撥。
複製程式碼我們這裡直接使用promise的格式，一樣執行。
第八個鉤子 AsyncSeriesBailHook
序列執行，並且只要一個外掛有返回值，立馬呼叫最終的回撥，並且不會繼續執行後續的外掛。
實驗程式碼如下：
// Car.js
import {
AsyncSeriesBailHook,
} from 'tapable';
export default class Car {
constructor() {
this.hooks = {
calculateRoutes: new AsyncSeriesBailHook(),
};
}
calculateRoutes() {
return this.hooks.calculateRoutes.promise();
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin1', () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線1');
resolve(1);
}, 1000);
});
});
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin2', () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線2');
resolve(2);
}, 2000);
});
});
car.calculateRoutes().then(() => { console.log('最終的回撥'); });
// 1s過後，列印計算路線1，立馬列印最終的回撥，不會再執行計算路線2了。
複製程式碼第九個鉤子 AsyncSeriesWaterfallHook
序列執行，並且前一個外掛的返回值，會作為後一個外掛的引數。
程式碼如下：
// Car.js
import {
AsyncSeriesWaterfallHook,
} from 'tapable';
export default class Car {
constructor() {
this.hooks = {
calculateRoutes: new AsyncSeriesWaterfallHook(['home']), // 要標註一下，要傳引數啦
};
}
calculateRoutes() {
return this.hooks.calculateRoutes.promise();
}
}
複製程式碼// index.js
import Car from './Car';
const car = new Car();
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin1', (result) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線1', result);
resolve(1);
}, 1000);
});
});
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin2', (result) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線2', result);
resolve(2);
}, 2000);
});
});
car.calculateRoutes().then(() => { console.log('最終的回撥'); });
// 1s過後，列印計算路線1 undefined，再過2s列印計算路線2 北京，然後立馬列印最終的回撥。
複製程式碼列印結果如圖：
封裝外掛
我們將註冊外掛的邏輯單獨封裝出來，如下：
export default class CalculateRoutesPlugin {
// 呼叫apply方法就可以完成註冊
apply(car) {
car.hooks.calculateRoutes.tapPromise('calculateRoutesPlugin', (result) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('計算路線1', result);
resolve('北京');
}, 1000);
});
});
}
}
複製程式碼在index.js中呼叫：
// index.js
import Car from './Car';
import CalculateRoutesPlugin from './CalculateRoutesPlugin';
const car = new Car();
const calculateRoutesPlugin = new CalculateRoutesPlugin();
calculateRoutesPlugin.apply(car); // 此節重點邏輯
car.calculateRoutes().then(() => { console.log('最終的回撥'); });
// 執行正常，會列印'計算路線1'
複製程式碼看到這裡，程式碼和Webpack的使用方式就差不多了，car類似Webpack中的Compiler/Compilation。index.js比作是Webpack的執行類，使用我們的Car（類比Compiler/Compilation），使用注入來的CalculateRoutesPlugin（類比Webpack的各種外掛）。完成打包工作。
Tapable
tapable的readme中沒有介紹一個類，就是Tapable，但是是可以使用到的，如下
const {
Tapable
} = require("tapable");
export default class Car extends Tapable {
...
}
複製程式碼如果看tapable原始碼的話，看不到這個類，但是切換到tapable-1分支，可以看到。
在Webpack原始碼中，Compiler和Compilation都和上面的Car一樣，繼承自Tapable。
那Tapable究竟幹了啥啊，看了一下它原始碼，發現它啥也沒幹，就是一個標誌，表示我這個類是一個可以註冊外掛的類。
雖然沒有什麼增強的功能，但是此時的Car有了兩個限制。如下：
const car = new Car();
car.apply(); // 報錯 Tapable.apply is deprecated. Call apply on the plugin directly instead
car.plugin(); // 報錯 Tapable.plugin is deprecated. Use new API on `.hooks` instead
複製程式碼這兩個方法不讓用了，我理解是為Webpack而做的限制，提醒外掛作者升級自己的外掛，使用最新的實踐。
鉤子型別（Hook Types）
上面我們研究了鉤子們的使用，接下來做一些總結。首先來說鉤子的型別。
按被註冊外掛們的執行邏輯來分鉤子
-
基本鉤子。註冊的外掛順序執行。如SyncHook、AsyncParallelHook、AsyncSeriesHook。
-
瀑布流鉤子。前一個外掛的返回值，是後一個外掛的入參。如SyncWaterfallHook，AsyncSeriesWaterfallHook。
-
Bail鉤子。Bail鉤子是指一個外掛返回非undefined的值，就不繼續執行後續的外掛。我理解這裡Bail是取迅速離開的意思。如：SyncBailHook，AsyncSeriesBailHook
-
迴圈鉤子。迴圈呼叫外掛，直到外掛的返回值是undefined。如SyncLoopHook。
按時序來區分鉤子
- 同步鉤子。Sync開頭的鉤子
- 非同步序列鉤子。AsyncSeries開頭的鉤子。
- 非同步並行鉤子。AsyncParallel開頭的鉤子。
攔截器（Interception）
我們還可以為鉤子新增攔截器。 一個外掛從對鉤子註冊，到鉤子呼叫，再到外掛響應。我們都可以通過攔截器監聽到。
car.hooks.calculateRoutes.intercept({
call: (...args) => {
console.log(...args, 'intercept call');
}, // 外掛被call時響應。
//
register: (tap) => {
console.log(tap, 'ntercept register');
return tap;
},// 外掛用tap方法註冊時響應。
loop: (...args) => {
console.log(...args, 'intercept loop')
},// loop hook的外掛被呼叫時響應。
tap: (tap) => {
console.log(tap, 'intercept tap')
} // hook的外掛被呼叫時響應。
})
複製程式碼上下文（Context）
外掛和攔截器都可以往裡面傳一個上下文物件的引數，該物件可用於向後續外掛和攔截器傳遞任意值。
myCar.hooks.accelerate.intercept({
context: true, // 這裡配置啟用上下文物件
tap: (context, tapInfo) => {
if (context) { // 這裡就可以拿到上下文物件
context.hasMuffler = true;
}
}
});
myCar.hooks.accelerate.tap({
name: "NoisePlugin",
context: true
}, (context, newSpeed) => {
// 這裡可以拿到攔截器裡的上下文物件，然後我們在外掛裡利用它的值做相應操作。
if (context && context.hasMuffler) {
console.log("Silence...");
} else {
console.log("Vroom!");
}
});
複製程式碼結束語
tapable的簡單使用，就研究到這裡。它為外掛機制提供了很強大的支援，不但讓我們對主體（Car）註冊各種外掛，還能控制外掛彼此的關係，控制自身相應的時機。
在Webpack中使用這樣的庫，再合適不過，Webpack是一個外掛的集合，通過tapable，有效的將外掛們組織起來，在合理的時機，合理的呼叫。