成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack源碼之tapable

Keagan / 1204人閱讀

摘要：它的行為和的方法相似，用來注冊一個處理函數(shù)監(jiān)聽器，來在信號事件發(fā)生時做一些事情他最終還是調(diào)用進行存儲。而就全部取出來執(zhí)行?？偨Y(jié)上面這些知識是理解插件和運行原理的前置條件更多內(nèi)容待下次分解參考源碼版本說明參考鏈接

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

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

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

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

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

tapable概念

tapable類似于node中的EventEmitter,專注于自定義事件的觸發(fā)和處理,自身可以被繼承或混入到其它模塊中。例如compile的實現(xiàn)就用到了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的第一個參數(shù),一般是用來確認(rèn)插件的名稱
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
myCar.hooks.accelerate.call("100")
//輸出   Accelerating to 100

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

this[name](...args)

進行執(zhí)行,在call執(zhí)行的時候其內(nèi)部涉及到工廠模式,因為call的調(diào)用,需要先執(zhí)行當(dāng)前SyncHook的compile方法,用工廠模式的目的就是根據(jù)傳入的不同option返回不同的通過new Function拼接出的
處理邏輯函數(shù),因為Hook有好幾種實現(xiàn),在實現(xiàn)類的實例中添加的消費者可以是sync,promise,async等等,都需要對應(yīng)不同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() 方法相似，用來注冊一個處理函數(shù)/監(jiān)聽器，來在信號/事件發(fā)生時做一些事情,他最終還是調(diào)用hook.tap(tapOpt, options.fn)進行存儲。而call就全部取出來執(zhí)行。

總結(jié)

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

參考源碼版本說明
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...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93783.html

相關(guān)文章

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

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

    Arno 評論0 收藏0

  • Webpack源碼閱讀之Tapable

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

    yanwei 評論0 收藏0

  • webpack源碼分析之四：plugin

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

    yhaolpz 評論0 收藏0

  • webpack源碼之plugin機制

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

    glumes 評論0 收藏0

  • 淺析webpack源碼之Compiler.js模塊(八)

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

    PumpkinDylan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<