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

不念不忘少年蓝@ 2022-03-07 15:58 130阅读 0赞

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

**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钩子(异步版)][Webpack_Tapable]

代码：[mock-webpack-tapable][]

[Webpack_Tapable]: https://segmentfault.com/a/1190000018312930
[mock-webpack-tapable]: https://github.com/funky-tiger/mock-webpack-tapable