深入探究Tapable

在Webpack中，Tapable是一個十分重要的概念，它是Webpack的核心工具之一。本文將從多個方面對Tapable進行詳細的闡述，包括它的基本使用方法、Tapable.plugin的廢棄、Tapable的翻譯、Tapable的讀音、Tapable與消息訂閱的關係以及為什麼Tapable要用New Function。在本文的代碼部分，我們將給出一些實際的代碼示例，幫助讀者更好地理解Tapable的使用方法。

一、Tapable官網

如果你想深入了解Tapable，那麼可以直接訪問官方文檔。Tapable的官方網站提供了詳細的文檔和示例，將Tapable的各個方面都闡述得很清楚。

// 官方網站示例代碼class Car {  constructor() {    this.hooks = {      accelerate: new SyncHook(["newSpeed"]),      brake: new SyncHook(),      calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])    };  }}const myCar = new Car();// Use the tap method to add a consumentmyCar.hooks.brake.tap("WarningLampPlugin", () => warningLamp.on());myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));myCar.hooks.calculateRoutes.tapPromise("GoogleMapsAPIPlugin", (source, target, routesList) => {  // return a promise  return googleMaps.calculateRoute(source, target).then(route => {    routesList.add(route);  })});// Use the call method to trigger the hooksmyCar.hooks.accelerate.call(10);

以上代碼中，我們定義了一個Car類，並且在Car類的構造函數中定義了三個hooks，分別是accelerate、brake、calculateRoutes。我們通過tap方法向每個hook中添加了不同的插件。最後，我們通過call方法觸發了整個Hooks的執行。

二、Tapable.plugin的廢棄

在Tapable的新版本中，Tapable.plugin這個方法已經被廢棄，經過更新之後，應該改用hooks方法，這個方法提供了多種不同的hook類型，可以根據不同情況進行選擇。

// 棄用的plugin方法const plugin = compilation.plugin.bind(compilation);plugin("optimize", (a, b, c) => {  console.log("This is an optimize plugin!");});// 新的hooks方法compilation.hooks.optimize.tap("optimize", (a, b, c) => {  console.log("This is an optimize plugin!");});

在上面的代碼片段中，我們可以看出新的hooks方法可以實現之前使用Plugin方法完成的工作。新的hooks方法可用於替換Plugin方法，並提供對更多事件的控制。

三、Tapable的翻譯

雖然Tapable在官方文檔中沒有給出中文翻譯，但是根據Tapable的意義，我們可以得出Tapable的中文翻譯應該是「可劈的」。

四、Tapable的讀音

Tapable的英文單詞中的「Tap」可以翻譯為「水龍頭」，「able」可以翻譯為「能」。所以，Tapable的中文意思就是「可劈的」。至於讀音，可以參考下面的音標：[ˈteɪpəbl]。

五、Tapable和消息訂閱

Tapable與消息訂閱模式有許多相似之處。在開發過程中，我們會在一些特定的事件上綁定和解綁特定的函數，而不是簡單地調用一個函數。這些特定的事件就像是觀察者模式中的「消息」，而我們要做的就是讓觀察者註冊用於接收消息的回調函數。在Tapable中，我們可以使用tap方法將回調函數添加到事件監聽器中。

// 消息訂閱的代碼示例const observers = [];function listen(observer) {  observers.push(observer);}function notify(message) {  observers.forEach(observer => observer(message));}function logMessage(message) {  console.log(`Message received: ${message}`);}listen(logMessage);notify("Hello!");// => Message received: Hello!

以上代碼中，我們編寫了一個簡單的消息訂閱系統，其中包括listen函數和notify函數。在listen函數中，我們向數組中添加回調函數；在notify函數中，我們循環遍曆數組，調用每個回調函數。在之後，我們調用了listen函數向消息監聽器中添加了一個回調函數logMessage，最後通過notify函數觸發了整個消息監聽器的執行，輸出了「Message received: Hello!」。

六、為什麼Tapable要用New Function

在Tapable中，事件的註冊是通過New Function的方式進行的。在每次編譯時，Webpack會將所有的Hook進行編譯，生成hook.js腳本。同時，Webpack也會生成一個包含所有回調函數的模塊。在執行編譯時，Webpack會使用New Function方式將所有的hook.js設為全局，然後調用模塊中的回調函數。

使用New Function的方式是為了解決Eval執行時的代碼污染問題。因為使用Eval的方式執行的代碼具有和全局代碼相同的作用域，這意味着它可以修改全局狀態，這會讓安全問題十分嚴峻。

七、Tapable的基本使用方法

在Tapable中，我們可以使用多種不同的hook類型，分別對應不同的事件類型，例如SyncHook、AsyncParallelHook、AsyncSeriesHook等等。我們可以通過定義不同的hook來監聽不同事件，並向每個hook中添加不同的插件以實現不同的功能。

// 示例代碼：使用SyncHook監聽事件// 1、定義一個名為「myHook」的SyncHookconst myHook = new SyncHook(['name']);// 2、向「myHook」中添加函數進行監聽myHook.tap('printName', name => {  console.log(`Name is ${name}`);});// 3、觸發執行「myHook」中的函數myHook.call('Tom');// => Name is Tom

以上代碼中，我們首先定義了一個名為「myHook」的SyncHook，並在其中定義了一個回調函數（printName）。接着，通過tap方法向myHook中添加了printName回調函數，最後使用call方法觸發了整個myHook的執行，並輸出了「Name is Tom」。

八、小結

本文從多個方面對Tapable進行了詳細的介紹，通過實際代碼示例和實際操作，讓大家了解到Tapable的基本使用方法、新版本的hooks方法、Tapable的翻譯、Tapable的讀音、Tapable與消息訂閱的關係以及為什麼Tapable要用New Function。通過學習Tapable，我們可以更好地理解Webpack的內部機制，提高我們的開發技能。