资讯专栏INFORMATION COLUMN

深入理解Webpack核心模块Tapable钩子[同步版]

cangck_X / 2808人阅读

摘要:本文将根据以下章节分别梳理每个钩子同步钩子首先安装是简单的同步钩子,它很类似于发布订阅。至此,我们把的所有同步钩子都解析完毕异步钩子比同步钩子麻烦些,我们会在下一章节开始解析异步的钩子传送门深入理解核心模块钩子异步版代码

记录下自己在前端路上爬坑的经历 加深印象,正文开始~

tapable是webpack的核心依赖库 想要读懂webpack源码 就必须首先熟悉tapable
ok.下面是webapck中引入的tapable钩子 由此可见 在webpack中tapable的重要性

const {
    SyncHook,
    SyncBailHook,
    SyncWaterfallHook,
    SyncLoopHook,
    AsyncParallelHook,
    AsyncParallelBailHook,
    AsyncSeriesHook,
    AsyncSeriesBailHook,
    AsyncSeriesWaterfallHook
 } = require("tapable");

这些钩子可分为同步的钩子和异步的钩子,Sync开头的都是同步的钩子,Async开头的都是异步的钩子。而异步的钩子又可分为并行和串行,其实同步的钩子也可以理解为串行的钩子。

本文将根据以下章节分别梳理每个钩子

同步钩子

SyncHook

SyncBailHook

SyncWaterfallHook

SyncLoopHook

首先安装tapable
npm i tapable -D

SyncHook

SyncHook是简单的同步钩子,它很类似于发布订阅。首先订阅事件,触发时按照顺序依次执行,所以说同步的钩子都是串行的。

const { SyncHook } = require("tapable");

class Hook{
    constructor(){
        /** 1 生成SyncHook实例 */
        this.hooks = new SyncHook(["name"]);
    }
    tap(){
        /** 2 注册监听函数 */
        this.hooks.tap("node",function(name){
            console.log("node",name);
        });
        this.hooks.tap("react",function(name){
            console.log("react",name);
        });
    }
    start(){
        /** 3出发监听函数 */
        this.hooks.call("call end.");
    }
}

let h = new Hook();

h.tap();/** 类似订阅 */ 
h.start();/** 类似发布 */

/* 打印顺序:
    node call end.
    react call end.
*/

可以看到 它是按照顺序依次打印的,其实说白了就是发布和订阅。接下来我们就手动实现它。

class SyncHook{ // 定义一个SyncHook类
    constructor(args){ /* args -> ["name"]) */
        this.tasks = [];
    }
    /** tap接收两个参数 name和fn */
    tap(name,fn){
        /** 订阅:将fn放入到this.tasks中 */
        this.tasks.push(fn);
    }
    start(...args){/** 接受参数 */
        /** 发布:将this.taks中的fn依次执行 */
        this.tasks.forEach((task)=>{
            task(...args);
        });
    }
}

let h = new SyncHook(["name"]);

/** 订阅 */
h.tap("react",(name)=>{
    console.log("react",name);
});
h.tap("node",(name)=>{
    console.log("node",name);
});
/** 发布 */
h.start("end.");

/* 打印顺序:
    react end.
    node end.
*/
SyncBailHook

SyncBailHook 从字面意思上理解为带有保险的同步的钩子,带有保险意思是 根据每一步返回的值来决定要不要继续往下走,如果return了一个非undefined的值 那就不会往下走,注意 如果什么都不return 也相当于return了一个undefined。

const { SyncBailHook } = require("tapable");

class Hook{
    constructor(){
        this.hooks = new SyncBailHook(["name"]);
    }
    tap(){
        this.hooks.tap("node",function(name){
            console.log("node",name);
            /** 此处return了一个非undefined
             *  代码到这里就不会继续执行余下的钩子
             */
            return 1;
        });
        this.hooks.tap("react",function(name){
            console.log("react",name);
        });
    }
    start(){
        this.hooks.call("call end.");
    }
}

let h = new Hook();

h.tap();
h.start();

/* 打印顺序:
    node call end.
*/

手动实现

class SyncHook{
    constructor(args){ 
        this.tasks = [];
    }
    tap(name,fn){
        this.tasks.push(fn);
    }
    start(...args){
        let index = 0;
        let result;
        /** 利用do while先执行一次的特性 */
        do{
            /** 拿到每一次函数的返回值 result */
            result = this.tasks[index++](...args);
            /** 如果返回值不为undefined或者执行完毕所有task -> 中断循环 */
        }while(result === undefined && index < this.tasks.length);
    }
}

let h = new SyncHook(["name"]);

h.tap("react",(name)=>{
    console.log("react",name);
    return 1;
});
h.tap("node",(name)=>{
    console.log("node",name);
});

h.start("end.");

/* 打印顺序:
   react end.
*/
SyncWaterfallHook

SyncWaterfallHook是同步的瀑布钩子,瀑布怎么理解呢? 其实就是说它的每一步都依赖上一步的执行结果,也就是上一步return的值就是下一步的参数。

const { SyncWaterfallHook } = require("tapable");

class Hook{
    constructor(){
        this.hooks = new SyncWaterfallHook(["name"]);
    }
    tap(){
        this.hooks.tap("node",function(name){
            console.log("node",name);
            /** 此处返回的值作为第二步的结果 */
            return "第一步返回的结果";
        });
        this.hooks.tap("react",function(data){
            /** 此处data就是上一步return的值 */
            console.log("react",data);
        });
    }
    start(){
        this.hooks.call("callend.");
    }
}

let h = new Hook();

h.tap();
h.start();

/* 打印顺序:
    node callend.
    react 第一步返回的结果
*/

手动实现:

class SyncWaterFallHook{
    constructor(args){
        this.tasks = [];
    }
    tap(name,fn){
        this.tasks.push(fn);
    }
    start(...args){
        /** 解构 拿到tasks中的第一个task -> first */
        let [first, ...others] = this.tasks;
        /** 利用reduce() 累计执行 
         * 首先传入第一个 first 并执行
         * l是上一个task n是当前task
         * 这样满足了 下一个函数依赖上一个函数的执行结果
        */
        others.reduce((l,n)=>{
            return n(l);
        },first(...args));
    }
}

let h = new SyncWaterFallHook(["name"]);

/** 订阅 */
h.tap("react",(name)=>{
    console.log("react",name);
    return "我是第一步返回的值";
});
h.tap("node",(name)=>{
    console.log("node",name);
});
/** 发布 */
h.start("end.");

/* 打印顺序:
    react end.
    node 我是第一步返回的值
*/
SyncLoopHook

SyncLoopHook是同步的循环钩子。 循环钩子很好理解,就是在满足一定条件时 循环执行某个函数:

const { SyncLoopHook } = require("tapable");

class Hook{
    constructor(){
        /** 定义一个index */
        this.index = 0;
        this.hooks = new SyncLoopHook(["name"]);
    }
    tap(){
        /** 箭头函数 绑定this */
        this.hooks.tap("node",(name) => {
            console.log("node",name);
            /** 当不满足条件时 会循环执行该函数 
             * 返回值为udefined时 终止该循环执行
            */
            return ++this.index === 5?undefined:"学完5遍node后再学react";
        });
        this.hooks.tap("react",(data) => {
            console.log("react",data);
        });
    }
    start(){
        this.hooks.call("callend.");
    }
}

let h = new Hook();

h.tap();
h.start();

/* 打印顺序:
    node callend.
    node callend.
    node callend.
    node callend.
    node callend.
    react callend.
*/

可以看到 执行了5遍node callend后再继续往下执行。也就是当返回undefined时 才会继续往下执行:

class SyncWaterFallHook{
    constructor(args){
        this.tasks = [];
    }
    tap(name,fn){
        this.tasks.push(fn);
    }
    start(...args){
        let result;
        this.tasks.forEach((task)=>{
            /** 注意 此处do{}while()循环的是每个多带带的task */
            do{
                /** 拿到每个task执行后返回的结果 */
                result = task(...args);
                /** 返回结果不是udefined时 会继续循环执行该task */
            }while(result !== undefined);
        });
    }
}

let h = new SyncWaterFallHook(["name"]);
let total = 0;
/** 订阅 */
h.tap("react",(name)=>{
    console.log("react",name);
    return ++total === 3?undefined:"继续执行";
});
h.tap("node",(name)=>{
    console.log("node",name);
});
/** 发布 */
h.start("end.");

/* 打印顺序:
    react end.
    react end.
    react end.
    node end.
*/

可以看到, 执行了3次react end.后 才继续执行了下一个task -> node end。至此,我们把tapable的所有同步钩子都解析完毕. 异步钩子比同步钩子麻烦些,我们会在下一章节开始解析异步的钩子.

传送门:深入理解Webpack核心模块Tapable钩子(异步版)

代码:mock-webpack-tapable

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102136.html

相关文章

  • 深入理解Webpack核心模块Tapable钩子[异步]

    摘要:接上一篇文章深入理解核心模块钩子同步版中三个注册方法同步注册的是中对三个触发方法这一章节我们将分别实现异步的版本和版本异步钩子的版本的版本的版本异步的钩子分为并行和串行的钩子,并行是指等待所有并发的异步事件执行之后再执行最终的异步回调。 接上一篇文章 深入理解Webpack核心模块WTApable钩子(同步版) tapable中三个注册方法 1 tap(同步) 2 tapAsync(...

    AlphaWallet 评论0 收藏0
  • 手写一个webpack插件

    摘要:引入定义一个自己的插件。一个最基础的的代码是这样的在构造函数中获取用户给该插件传入的配置会调用实例的方法给插件实例传入对象导出在使用这个时,相关配置代码如下和在开发时最常用的两个对象就是和,它们是和之间的桥梁。 本文示例源代码请戳github博客,建议大家动手敲敲代码。 webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,w...

    cnio 评论0 收藏0
  • webpack系列-插件机制杂记

    摘要:系列文章系列第一篇基础杂记系列第二篇插件机制杂记系列第三篇流程杂记前言本身并不难,他所完成的各种复杂炫酷的功能都依赖于他的插件机制。的插件机制依赖于一个核心的库,。是什么是一个类似于的的库主要是控制钩子函数的发布与订阅。 系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 webpack本身并不难,他所完成...

    Neilyo 评论0 收藏0
  • 浅尝webpack

    摘要:用于对模块的源代码进行转换。将基础模块打包进动态链接库,当依赖的模块存在于动态链接库中时,无需再次打包,而是直接从动态链接库中获取。负责打包出动态链接库,负责从主要配置文件中引入插件打包好的动态链接库文件。告一段落,浅尝辄止。 吐槽一下 webpack 自出现时,一直备受青睐。作为强大的打包工具,它只是出现在项目初始或优化的阶段。如果没有参与项目的构建,接触的机会几乎为零。即使是参与了...

    villainhr 评论0 收藏0
  • webpack详解

    摘要:但也是最复杂的一个。中当一旦某个返回值结果不为便结束执行列表中的插件中上一个插件执行结果当作下一个插件的入参调用并行执行插件流程篇本文关于的流程讲解是基于的。 webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢? webpack的配置 const path = requir...

    lcodecorex 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<