亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Arno / 2917人閱讀

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

打開compile

class Compiler extends Tapable {
    constructor(context) {
        super();
            this.hooks = {
                //...
            }
    }
}

Compiler是個(gè)構(gòu)造函數(shù)，定義了一些靜態(tài)屬性和方法

我們先看 Tapable

Tapable在node_modules插件下
git地址
上面寫的解釋Just a little module for plugins就跟沒寫一樣

在lib/index.js 文件下

exports.__esModule = true;
exports.Tapable = require("./Tapable");
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

我們看到輸出的一些對(duì)象方法

每一個(gè)對(duì)應(yīng)一個(gè)模塊

而在webpakck Compiler.js下引入的下面

const {
    Tapable,
    SyncHook,
    SyncBailHook,
    AsyncParallelHook,
    AsyncSeriesHook
} = require("tapable");

so，我們先研究引入的對(duì)象

tap 的英文單詞解釋，除了最常用的 點(diǎn)擊 手勢(shì)之外，還有一個(gè)意思是 水龍頭

進(jìn)一步可以理解為tapable是管理事件流的意思

借用網(wǎng)上的一張圖，tapable是事件管家
之所以名稱有差距，是版本問題導(dǎo)致的，目前的是1.1.0版本，我們看看git果然證明了v0.2.8以前的全部都是下圖函數(shù)所示

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101089.html

相關(guān)文章

  • 淺析webpack源碼之Compilation.js粗解(九)

    摘要：編寫良好的模塊提供了可靠的抽象和封裝邊界，構(gòu)成了一致的設(shè)計(jì)和明確的目的。塊此特定術(shù)語在內(nèi)部用于管理捆綁過程。捆綁包由塊組成，其中有幾種類型例如入口和子?？偨Y(jié)一個(gè)塊是進(jìn)程中的一組模塊，一個(gè)是一個(gè)發(fā)出的塊或一組塊。 我們先看一下 compilation是什么？是一個(gè)很大的對(duì)象打印key值 [ _pluginCompat, hooks, name, compiler, res...

    Tangpj 評(píng)論0 收藏0

  • 淺析webpack源碼之Stat.js粗解(十）

    摘要：從出來接著我們看大法，打印一下感覺之前所以的對(duì)象都放在了一個(gè)合集里，給人而全的感覺里面主要含有一個(gè)對(duì)象，，輸出的，等給每次打包一個(gè)值，代表唯一性天啊 從compilation出來接著我們看 const stats = new Stats(compilation); Stats.js log大法，打印一下 stats let Stats = { compilation:{ ...

    Andrman 評(píng)論0 收藏0

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

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

    PumpkinDylan 評(píng)論0 收藏0

  • webpack源碼之tapable

    摘要：它的行為和的方法相似，用來注冊(cè)一個(gè)處理函數(shù)監(jiān)聽器，來在信號(hào)事件發(fā)生時(shí)做一些事情他最終還是調(diào)用進(jìn)行存儲(chǔ)。而就全部取出來執(zhí)行?？偨Y(jié)上面這些知識(shí)是理解插件和運(yùn)行原理的前置條件更多內(nèi)容待下次分解參考源碼版本說明參考鏈接 引言 去年3月的時(shí)候當(dāng)時(shí)寫了一篇webpack2-update之路,到今天webpack已經(jīng)到了4.2,更新挺快的,功能也在不斷的完善,webpack4特性之一就是零配置, w...

    Keagan 評(píng)論0 收藏0

  • Webpack源碼閱讀之Tapable

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

    yanwei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<