webpack源碼之tapable

Keagan 發布于2019-08-22 15:49 / 1189人閱讀

摘要：它的行為和的方法相似，用來注冊一個處理函數監聽器，來在信號事件發生時做一些事情他最終還是調用進行存儲。而就全部取出來執行。總結上面這些知識是理解插件和運行原理的前置條件更多內容待下次分解參考源碼版本說明參考鏈接

引言

去年3月的時候當時寫了一篇webpack2-update之路,到今天webpack已經到了4.2,更新挺快的,功能也在不斷的完善,webpack4特性之一就是零配置, webpack生命力真的很頑強,積極跟上環境的變化,響應社區的需求,不斷的迭代,因為parcel在其之前就有這個特性了。直接運行webpack命令,默認production模式,但是會有WARNING。

如下所示在package.json中啟動腳本配置

"scripts": {
    "build": "webpack --mode production",  //代碼做了壓縮/作用域提升(就是將依賴模塊內容直接放到當前模塊內)/去掉了開發模式下存在的代碼/更容易使用輸出的資源文件(assets做了優化處理)
    "dev": "webpack-dev-server --open --mode development", //支持注釋/提示/source maps
  },

這種約定大于配置的開發方式,在很多框架中都存在, 默認的配置覆蓋了大部分用戶使用的場景,提高了大部分人的生產力。當然除了默認配置外還有其它一些特性,例如支持導入更多的模塊類型,可以解析.json.wasm類型的文件等等。

雖然使用形式上變化的這么快, 但是其核心思想沒多大變化。其中webpack內部有一個事件流機制,基于tapable,也是本文研究的對象,它的作用是將各個插件串聯起來,還有webpack中負責編譯的Compile也是tapable的實例,所以這個蠻重要的,下面詳細說一下。

tapable概念

tapable類似于node中的EventEmitter,專注于自定義事件的觸發和處理,自身可以被繼承或混入到其它模塊中。例如compile的實現就用到了tapable,如下所示。

var Tapable = require("tapable");

function Compiler() {
    Tapable.call(this);
}

Compiler.prototype = Object.create(Tapable.prototype);

Hook分析

class Car {
    constructor() {
        this.hooks = {
            accelerate: new SyncHook(["newSpeed"]),
            break: new SyncHook(),
            calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
        };
    }

}
const myCar = new Car();
//使用tap方法添加了一個消費者,其中tap的第一個參數,一般是用來確認插件的名稱
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
myCar.hooks.accelerate.call("100")
//輸出   Accelerating to 100

說明其中SyncHook繼承了Hook方法,主要作用是重寫了compile方法。而Hook內部維護了 this.taps = [],每次執行tap時,都會進行insert,call的時候通過

this[name](...args)

進行執行,在call執行的時候其內部涉及到工廠模式,因為call的調用,需要先執行當前SyncHook的compile方法,用工廠模式的目的就是根據傳入的不同option返回不同的通過new Function拼接出的
處理邏輯函數,因為Hook有好幾種實現,在實現類的實例中添加的消費者可以是sync,promise,async等等,都需要對應不同compile來進行處理。

tapable使用分析

const {Tapable,SyncHook} = require("tapable");
const myCar = new Tapable();
myCar.hooks = {
    myHook: new SyncHook()
};
let speed = 0;
myCar.plugin("my-hook", () => speed+=2);
myCar.hooks.myHook.call();
myCar.plugin("my-hook", () => speed += 10);
myCar.hooks.myHook.call();
console.log(speed);
//輸出14

說明
plugin(name:string, handler:function)：允許將一個自定義插件注冊到 Tapable 實例的事件中。它的行為和 EventEmitter 的 on() 方法相似，用來注冊一個處理函數/監聽器，來在信號/事件發生時做一些事情,他最終還是調用hook.tap(tapOpt, options.fn)進行存儲。而call就全部取出來執行。

總結

上面這些知識是理解插件和webpack運行原理的前置條件,更多內容待下次分解

參考源碼版本說明
tapable: "1.0.0",
webpack: "^4.2.0",

參考鏈接
https://medium.com/webpack/we...
https://medium.com/webpack/we...
https://github.com/dwqs/blog/...
https://doc.webpack-china.org...
https://github.com/webpack/ta...

GPU云服務器云服務器源碼中文說明之 Tapable webpack _webpack

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93783.html

淺析webpack源碼之Tapable粗解（五）

摘要：打開是個構造函數，定義了一些靜態屬性和方法我們先看在插件下地址上面寫的解釋就跟沒寫一樣在文件下我們看到輸出的一些對象方法每一個對應一個模塊而在下引入的下面，我們先研究引入的對象的英文單詞解釋，除了最常用的點擊手勢之外，還有一個意思是水龍頭進打開compile class Compiler extends Tapable { constructor(context) { ...

Arno 2019-08-23 14:45 評論0 收藏0
Webpack源碼閱讀之Tapable

摘要：源碼分析安裝好包，根據上述方法，我們運行如下命令初始化在構造函數處打上斷點，可以看到繼承自，上面定義了一個函數。因為函數定義在原型上，并通過在構造函數中賦值。 Webpack源碼閱讀之Tapable webpack采用Tapable來進行流程控制，在這套體系上，內部近百個插件有條不紊，還能支持外部開發自定義插件來擴展功能，所以在閱讀webpack源碼前先了解Tapable的機制是很有必...

yanwei 2019-08-26 10:48 評論0 收藏0
webpack源碼分析之四：plugin

摘要：流程劃分縱觀整個打包過程，可以流程劃分為四塊。核心類關系圖功能實現模塊通過將源碼解析為樹并拆分，以及直至基礎模塊。通過的依賴和切割文件構建出含有和包含關系的對象。通過模版完成主入口文件的寫入，模版完成切割文件的寫入。前言插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個編譯過程。plugin在編譯的關鍵地方觸發對應的事件，極大的...

yhaolpz 2019-08-23 10:34 評論0 收藏0
webpack源碼之plugin機制

摘要：調用的目的是為了注冊你的邏輯指定一個綁定到自身的事件鉤子。這個對象在啟動時被一次性建立，并配置好所有可操作的設置，包括，和。對象代表了一次資源版本構建。一個對象表現了當前的模塊資源編譯生成資源變化的文件以及被跟蹤依賴的狀態信息。引言在上一篇文章Tapable中介紹了其概念和一些原理用法,和這次討論分析webpack plugin的關聯很大。下面從實現一個插件入手。 demo插件 f...

glumes 2019-08-22 15:51 評論0 收藏0
淺析webpack源碼之Compiler.js模塊(八)

摘要：小尾巴最終返回了屬性掛載把引入的函數模塊全部暴露出來下面暴露了一些插件再通俗一點的解釋比如當你你能調用文件下的方法這個和上面的不同在于上面的是掛在函數對象上的正題要想理解必須要理解再寫一遍地址我們先簡單的理解它為一個通過注冊插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

PumpkinDylan 2019-08-23 14:50 評論0 收藏0