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

資訊專欄INFORMATION COLUMN

webpack源碼之tapable

Keagan / 1239人閱讀

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

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

如下所示在package.json中啟動(dòng)腳本配置

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

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

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

tapable概念

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

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

this[name](...args)

進(jìn)行執(zhí)行,在call執(zhí)行的時(shí)候其內(nèi)部涉及到工廠模式,因?yàn)閏all的調(diào)用,需要先執(zhí)行當(dāng)前SyncHook的compile方法,用工廠模式的目的就是根據(jù)傳入的不同option返回不同的通過(guò)new Function拼接出的
處理邏輯函數(shù),因?yàn)镠ook有好幾種實(shí)現(xiàn),在實(shí)現(xiàn)類的實(shí)例中添加的消費(fèi)者可以是sync,promise,async等等,都需要對(duì)應(yīng)不同compile來(lái)進(jìn)行處理。

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

說(shuō)明
plugin(name:string, handler:function)：允許將一個(gè)自定義插件注冊(cè)到 Tapable 實(shí)例 的事件中。它的行為和 EventEmitter 的 on() 方法相似，用來(lái)注冊(cè)一個(gè)處理函數(shù)/監(jiān)聽(tīng)器，來(lái)在信號(hào)/事件發(fā)生時(shí)做一些事情,他最終還是調(diào)用hook.tap(tapOpt, options.fn)進(jìn)行存儲(chǔ)。而call就全部取出來(lái)執(zhí)行。

總結(jié)

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

參考源碼版本說(shuō)明
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

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

  • Webpack源碼閱讀之Tapable

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

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

  • webpack源碼分析之四：plugin

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

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

  • webpack源碼之plugin機(jī)制

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

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

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

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

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

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

0條評(píng)論

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