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

最新推荐文章于 2024-04-06 09:37:31 发布
最新推荐文章于 2024-04-06 09:37:31 发布
阅读量148 收藏
点赞数
文章标签： webpack javascript ViewUI
原文链接：https://segmentfault.com/a/1190000018312930
版权

接上一篇文章 深入理解Webpack核心模块WTApable钩子(同步版)

tapable中三个注册方法

  • 1 tap(同步) 2 tapAsync(cb) 3 tapPromise(注册的是Promise)

tapable中对三个触发方法

  • 1 call 2 callAsync 3 promise

这一章节 我们将分别实现异步的Async版本和Promise版本

异步钩子
  • AsyncParallelHook
  • AsyncParallelHook的Promise版本
  • AsyncSeriesHook
  • AsyncSeriesHook的Promise版本
  • AsyncSeriesWaterfallHook
  • AsyncSeriesWaterfallHook的Promise版本

异步的钩子分为并行和串行的钩子，并行是指 等待所有并发的异步事件执行之后再执行最终的异步回调。
而串行是值 第一步执行完毕再去执行第二步，以此类推，直到执行完所有回调再去执行最终的异步回调。

AsyncParallelHook

AsyncParallelHook是异步并行的钩子，上代码:

const { AsyncParallelHook } = require('tapable');

class Hook{
    constructor(){
        this.hooks = new AsyncParallelHook(['name']);
    }
    tap(){
        /** 异步的注册方法是tapAsync() 
         * 并且有回调函数cb.
        */
        this.hooks.tapAsync('node',function(name,cb){
            setTimeout(()=>{
                console.log('node',name);
                cb();
            },1000);
        });
        this.hooks.tapAsync('react',function(name,cb){
            setTimeout(()=>{
                console.log('react',name);
                cb();
            },1000);
        });
    }
    start(){
        /** 异步的触发方法是callAsync() 
         * 多了一个最终的回调函数 fn.
        */
        this.hooks.callAsync('call end.',function(){
            console.log('最终的回调');
        });
    }
}

let h = new Hook();

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

/* 打印顺序：
    node call end.
    react call end.
    最终的回调
*/

等待1s后，分别执行了node call end和react callend 最后执行了最终的回调fn.

手动实现：

class AsyncParallelHook{
    constructor(args){ /* args -> ['name']) */
        this.tasks = [];
    }
    /** tap接收两个参数 name和fn */
    tap(name,fn){
        /** 订阅:将fn放入到this.tasks中 */
        this.tasks.push(fn);
    }
    start(...args){
        let index = 0;
        /** 通过pop()获取到最后一个参数 
         * finalCallBack() 最终的回调
         */
        let finalCallBack = args.pop();
        /** 箭头函数绑定this */
        let done = () => {
            /** 执行done() 每次index+1 */
            index++;
            if(index === this.tasks.length){
                /** 执行最终的回调 */
                finalCallBack();
            }
        }
        this.tasks.forEach((task)=>{
            /** 执行每个task，传入我们给定的done回调函数 */
            task(...args,done);
        });
    }
}

let h = new AsyncParallelHook(['name']);

/** 订阅 */
h.tap('react',(name,cb)=>{
    setTimeout(()=>{
        console.log('react',name);
        cb();
    },1000);
});
h.tap('node',(name,cb)=>{
    setTimeout(()=>{
        console.log('node',name);
        cb();
    },1000);
});
/** 发布 */
h.start('end.',function(){
    console.log('最终的回调函数');
});

/* 打印顺序：
    react end.
    node end.
    最终的回调函数
*/
AsyncParallelHook的Promise版本 
const { AsyncParallelHook } = require('tapable');

class Hook{
    constructor(){
        this.hooks = new AsyncParallelHook(['name']);
    }
    tap(){
        /** 这里是Promsie写法 
         * 注册事件的方法为tapPromise 
        */
        this.hooks.tapPromise('node',function(name){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('node',name);
                    resolve();
                },1000);
            });
        });
        this.hooks.tapPromise('react',function(name){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('react',name);
                    resolve();
                },1000);
            });
        });
    }
    start(){
        /** 
         * promsie最终返回一个prosise 成功resolve时
         * .then即为最终回调
        */
        this.hooks.promise('call end.').then(function(){
            console.log('最终的回调');
        });
    }
}

let h = new Hook();

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

/* 打印顺序：
    node call end.
    react call end.
    最终的回调
*/

这里钩子还是AsyncParallelHook钩子，只是写法变成了promise的写法，去掉了回调函数cb().变成了成功时去resolve().其实用Promise可以更好解决异步并行的问题，因为Promise的原型方法上有个all()方法，它的作用就是等待所有promise执行完毕后再去执行最终的promise。我们现在去实现它:

class SyncHook{
    constructor(args){ 
        this.tasks = [];
    }
    tapPromise(name,fn){
        this.tasks.push(fn);
    }
    promise(...args){
        /** 利用map方法返回一个新数组的特性 */
        let tasks = this.tasks.map((task)=>{
            /** 每一个task都是一个Promise */
            return task(...args);
        });
        /** Promise.all() 等待所有Promise都执行完毕 */
        return Promise.all(tasks);
    }
}

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

/** 订阅 */
h.tapPromise('react',(name)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('react',name);
            resolve();
        },1000);
    });
});
h.tapPromise('node',(name)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('node',name);
            resolve();
        },1000);
    });
});
/** 发布 */
h.promise('end.').then(function(){
    console.log('最终的回调函数');
});

/* 打印顺序：
    react end.
    node end.
    最终的回调函数
*/
AsyncSeriesHook

AsyncSeriesHook是异步串行的钩子， 串行，我们刚才说了， 它是一步步去执行的，下一步执行依赖上一步执行是否完成，手动实现:

const { AsyncSeriesHook } = require('tapable');

class Hook{
    constructor(){
        this.hooks = new AsyncSeriesHook(['name']);
    }
    tap(){
        /** 异步的注册方法是tapAsync() 
         * 并且有回调函数cb.
        */
        this.hooks.tapAsync('node',function(name,cb){
            setTimeout(()=>{
                console.log('node',name);
                cb();
            },1000);
        });
        this.hooks.tapAsync('react',function(name,cb){
            /** 此回调要等待上一个回调执行完毕后才开始执行 */
            setTimeout(()=>{
                console.log('react',name);
                cb();
            },1000);
        });
    }
    start(){
        /** 异步的触发方法是callAsync() 
         * 多了一个最终的回调函数 fn.
        */
        this.hooks.callAsync('call end.',function(){
            console.log('最终的回调');
        });
    }
}

let h = new Hook();

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

/* 打印顺序：
    node call end.
    react call end. -> 1s后打印
    最终的回调 -> 1s后打印
*/

AsyncParallelHook和AsyncSeriesHook的区别是AsyncSeriesHook是串行的异步钩子，也就是说它会等待上一步的执行 只有上一步执行完毕了 才会开始执行下一步。而AsyncParallelHook是并行异步 AsyncParallelHook 是同时并发执行。 ok.手动实现 AsyncSeriesHook:

class AsyncParallelHook{
    constructor(args){ /* args -> ['name']) */
        this.tasks = [];
    }
    /** tap接收两个参数 name和fn */
    tap(name,fn){
        /** 订阅:将fn放入到this.tasks中 */
        this.tasks.push(fn);
    }
    start(...args){
        let index = 0;
        let finalCallBack = args.pop();
        /** 递归执行next()方法 直到执行所有task
         * 最后执行最终的回调finalCallBack()
         */
        let next = () => {
            /** 直到执行完所有task后 
             * 再执行最终的回调 finalCallBack()
             */
            if(index === this.tasks.length){
                return finalCallBack();
            }
            /** index++ 执行每一个task 并传入递归函数next
             * 执行完每个task后继续递归执行下一个task
             * next === cb，next就是每一步的cb回调
            */
            this.tasks[index++](...args,next);
        }
        /** 执行next() */
        next();
    }
}

let h = new AsyncParallelHook(['name']);

/** 订阅 */
h.tap('react',(name,cb)=>{
    setTimeout(()=>{
        console.log('react',name);
        cb();
    },1000);
});
h.tap('node',(name,cb)=>{
    setTimeout(()=>{
        console.log('node',name);
        cb();
    },1000);
});
/** 发布 */
h.start('end.',function(){
    console.log('最终的回调函数');
});

/* 打印顺序：
    react end.
    node end. -> 1s后打印
    最终的回调函数 -> 1s后打印
*/
AsyncSeriesHook的Promise版本 
const { AsyncSeriesHook } = require('tapable');

class Hook{
    constructor(){
        this.hooks = new AsyncSeriesHook(['name']);
    }
    tap(){
        /** 这里是Promsie写法 
         * 注册事件的方法为tapPromise 
        */
        this.hooks.tapPromise('node',function(name){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('node',name);
                    resolve();
                },1000);
            });
        });
        this.hooks.tapPromise('react',function(name){
            /** 等待上一步 执行完毕之后 再执行 */
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('react',name);
                    resolve();
                },1000);
            });
        });
    }
    start(){
        /** 
         * promsie最终返回一个prosise 成功resolve时
         * .then即为最终回调
        */
        this.hooks.promise('call end.').then(function(){
            console.log('最终的回调');
        });
    }
}

let h = new Hook();

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

/* 打印顺序：
    node call end.
    react call end. -> 1s后打印
    最终的回调 -> 1s后打印
*/

手动实现AsyncSeriesHook的Promise版本

class AsyncSeriesHook{
    constructor(args){ 
        this.tasks = [];
    }
    tapPromise(name,fn){
        this.tasks.push(fn);
    }
    promise(...args){
        /** 1 解构 拿到第一个first
         * first是一个promise
         */
        let [first, ...others] = this.tasks;
        /** 4 利用reduce方法 累计执行
         * 它最终返回的是一个Promsie
         */
        return others.reduce((l,n)=>{
            /** 1 下一步的执行依赖上一步的then */
            return l.then(()=>{
                /** 2 下一步执行依赖上一步结果 */
                return n(...args);
            });
        },first(...args));
    }
}

let h = new AsyncSeriesHook(['name']);

/** 订阅 */
h.tapPromise('react',(name)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('react',name);
            resolve();
        },1000);
    });
});
h.tapPromise('node',(name)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('node',name);
            resolve();
        },1000);
    });
});
/** 发布 */
h.promise('end.').then(function(){
    console.log('最终的回调函数');
});

/* 打印顺序：
    react end.
    node end. -> 1s后打印
    最终的回调函数 -> 1s后打印
*/

最后一个AsyncSeriesWaterfallHook：

AsyncSeriesWaterfallHook

AsyncSeriesWaterfallHook 异步的串行的瀑布钩子，首先 它是一个异步串行的钩子，同时 它的下一步依赖上一步的结果返回：

const { AsyncSeriesWaterfallHook } = require('tapable');

class Hook{
    constructor(){
        this.hooks = new AsyncSeriesWaterfallHook(['name']);
    }
    tap(){
        this.hooks.tapAsync('node',function(name,cb){
            setTimeout(()=>{
                console.log('node',name);
                /** 第一次参数是err, 第二个参数是传递给下一步的参数 */
                cb(null,'第一步返回第二步的结果');
            },1000);
        });
        this.hooks.tapAsync('react',function(data,cb){
            /** 此回调要等待上一个回调执行完毕后才开始执行 
             *  并且 data 是上一步return的结果.
            */
            setTimeout(()=>{
                console.log('react',data);
                cb();
            },1000);
        });
    }
    start(){
        this.hooks.callAsync('call end.',function(){
            console.log('最终的回调');
        });
    }
}

let h = new Hook();

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

/* 打印顺序：
    node call end.
    react 第一步返回第二步的结果
    最终的回调
*/

我们可以看到 第二步依赖了第一步返回的值， 并且它也是串行的钩子，实现它：

class AsyncParallelHook{
    constructor(args){ /* args -> ['name']) */
        this.tasks = [];
    }
    /** tap接收两个参数 name和fn */
    tap(name,fn){
        /** 订阅:将fn放入到this.tasks中 */
        this.tasks.push(fn);
    }
    start(...args){
        let index = 0;
        /** 1 拿到最后的最终的回调 */
        let finalCallBack = args.pop();
        let next = (err,data) => {
            /** 拿到每个task */
            let task = this.tasks[index];
            /** 2 如果没传task 或者全部task都执行完毕
             * return 直接执行最终的回调finalCallBack()
             */
            if(!task) return finalCallBack();

            if(index === 0){
                /** 3 执行第一个task
                 * 并传递参数为原始参数args
                 */
                task(...args, next);
            }else{
                /** 4 执行处第二个外的每个task
                 * 并传递的参数 data
                 *  data ->‘传递给下一步的结果’
                 */
                task(data, next);
            }
            index++;
        }
        /** 执行next() */
        next();
    }
}

let h = new AsyncParallelHook(['name']);

/** 订阅 */
h.tap('react',(name,cb)=>{
    setTimeout(()=>{
        console.log('react',name);
        cb(null,'传递给下一步的结果');
    },1000);
});
h.tap('node',(name,cb)=>{
    setTimeout(()=>{
        console.log('node',name);
        cb();
    },1000);
});
/** 发布 */
h.start('end.',function(){
    console.log('最终的回调函数');
});

/* 打印顺序：
    react end.
    node 传递给下一步的结果
    最终的回调函数
*/
AsyncSeriesWaterfallHook的Promise版本 
const { AsyncSeriesWaterfallHook } = require('tapable');

class Hook{
    constructor(){
        this.hooks = new AsyncSeriesWaterfallHook(['name']);
    }
    tap(){
        this.hooks.tapPromise('node',function(name){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('node',name);
                    /** 在resolve中把结果传给下一步 */
                    resolve('返回给下一步的结果');
                },1000);
            });
        });
        this.hooks.tapPromise('react',function(name){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('react',name);
                    resolve();
                },1000);
            });
        });
    }
    start(){
        this.hooks.promise('call end.').then(function(){
            console.log('最终的回调');
        });
    }
}

let h = new Hook();

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

/* 打印顺序：
    node call end.
    react 返回给下一步的结果
    最终的回调
*/

用Promsie实现很简单，手动实现它吧:

class AsyncSeriesHook{
    constructor(args){ 
        this.tasks = [];
    }
    tapPromise(name,fn){
        this.tasks.push(fn);
    }
    promise(...args){
        /** 1 解构 拿到第一个first
         * first是一个promise
         */
        let [first, ...others] = this.tasks;
        /** 2 利用reduce方法 累计执行
         * 它最终返回的是一个Promsie
         */
        return others.reduce((l,n)=>{
            return l.then((data)=>{
                /** 3 将data传给下一个task 即可 */
                return n(data);
            });
        },first(...args));
    }
}

let h = new AsyncSeriesHook(['name']);

/** 订阅 */
h.tapPromise('react',(name)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('react',name);
            resolve('promise-传递给下一步的结果');
        },1000);
    });
});
h.tapPromise('node',(name)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('node',name);
            resolve();
        },1000);
    });
});
/** 发布 */
h.promise('end.').then(function(){
    console.log('最终的回调函数');
});

/* 打印顺序：
    react end.
    node promise-传递给下一步的结果
    最终的回调函数
*/

ok.至此，我们把tapable的钩子全部解析并手动实现完毕。写文章不易，喜欢的话给个赞或者start～
代码在github上：mock-webpack-tapable

weixin_34413802
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack插件开发必会Tapable
发果叁
10-31 649
tapable只是一个工具，具体怎么使用还是看开发者，不一定要使用在webpack，但是对于学习webpack，深入构建流程，了解插件开发是必不可少的一个环节，努力加油吧。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
解决Cannot read property ‘tapAsync‘ of undefined 问题过程
hjseo_seg的博客
03-07 3375
前两天从公司git 上clone了一个前端项目采用Nodejs + React 写的，想本地跑起来试试看，自己倒腾倒腾，结果在尝试的过程中遇到各种问题，真是一路上过关斩将终于跑起来了，其中有个典型的问题，因为是初次接触这个问题困扰了我几天，具体错误如下： Module build failed (from ./node_modules/_mini-css-extract-plugin@0.7.0@mini-css-extract-plugin/dist/loader.js): TypeError: Cann
深入Webpack之Tapable详解
Cosalneo的博客
03-16 1612
Tapable是什么 官网的解释：是 webpack 的一个核心工具，但也可用于其他地方， 以提供类似的插件接口。 在 Webpack 中的许多对象都扩展自 Tapable 类。 它对外暴露了 tap ，tapAsync 和 tapPromise 等方法， 插件可以使用这些方法向 Webpack 中注入自定义构建的步骤，这些步骤将在构建过程中触发。 Webpack本质上是基于事件流的。Webpack 的生命周期是通过 Tapable 提供的钩子类来实现的。Webpack 的插件体系也是基于 Tapable
webpack - tapable
Web_boom的博客
06-30 163
Tapable是webpack最重要的库了，如果你需要阅读源码，需要写一个webpack plugin,那么最好先了解Tapable是什么Tapable其实就是一个EventEmitter库，但它相比普通的EventEmitter,它还支持异步的Event,这样就可以支持异步插件。 上面是来自Tapable的库导出的函数方法，除了Sync的方法，还有Async。 同步的钩子很简单，调用call会执行执行所有被的钩子。 同步方法除了普通的钩子还有其他的,比如:异步的钩子和同步钩子差异的地方在于有两个不同的关键
浅谈Webpack核心模块tapable解析
12-09
本文介绍了Webpack核心模块tapable，分享给大家，具体如下： 前言 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是对前端项目实现自动化和优化必不可少的工具，Webpack 的 loader （加载器）和 plugin...
详解webpack异步加载业务模块
08-30
因此，webpack 提供了异步加载功能，以便按需加载那些只有在特定操作或条件满足时才会用到的模块，从而优化应用性能。 在 Webpack 中，实现异步加载的一种方式是使用 `require.ensure` API。`require.ensure` 会...
深入理解 webpack 文件打包机制(小结)
08-28
本篇文章将深入探讨 Webpack 的文件打包机制，包括单文件打包、代码分割、不同版本间的差异以及优化技术如 Tree Shaking 和 Scope Hoisting。 1. **Webpack 单文件如何进行打包？** 当我们只有一个入口文件时，...
webpack详解
weixin_33682719的博客
03-10 351
webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ webpack的配置 const path = require('path'); module.exports = { entry: "./app/entry", // string | object | array // ...
webpack4 插件钩子库tapable、compiler和compilation
weixin_43294560的博客
01-21 2430
webpack格式文件实现的内部方法(自定义只需重写size和source)
解决Cannot read property ‘tapAsync‘ of undefined打包错误
h2372045481的博客
06-27 5074
解决Cannot read property ‘tapAsync‘ of undefined打包错误
webpack之tapable
weixin_42114897的博客
11-29 174
webpack之tapable 近期研究webpack loader和plugin编写，发现涉及到tapable,闲来无事翻翻源码结合使用方法记录一下 原文 https://github.com/webpack/tapable/tree/master 一、钩子类型 tapable提供了很多钩子（Hook classes） const { SyncHook, // 同步钩子 从上到下顺序执行 SyncBailHook, // 同步早退
webpack---tapable
qq_36303110的博客
06-16 133
tapable
揭秘webpack插件工作流程和原理，已拿offer入职
最新发布
2401_84093837的博客
04-06 405
在模块开始编译之前触发，可以用于修改模:在模块开始编译之前触发，可以用于修改模块:当所有模块都编译成功后被调用:当一次停止接收新模块时触发:在依赖优化的开始执行:在优化阶段的开始执行moduleschunks:优化任何代码块资源，这些资源存放在上。一个chunk有一个files属性，它指向由一个chunk创建的所有文件。任何额外的chunk资源都存放在上。chunks:优化所有存放在的所有资源。assetsCompiler 和 Compilation 的区别Compiler代表了整个Webpack。
Webpack 钩子介绍、手写 Webpack Plugin
Lyrelion的博客
12-31 2882
Webpack 钩子介绍、手写 Webpack Plugin
TypeError: Cannot read property ‘tapAsync‘ of undefined
LTE777的博客
07-11 3266
TypeError: Cannot read property 'tapAsync' of undefined
webpack tapable 用法详解
陆小森_红齐飘飘的博客
08-23 1569
尝试了解webpack的工作机制的时候，发现webpack大量使用了tapable这个核心库来组织代码， tapable 提供了很多中钩子注册，执行的机制。让webpack可以灵活的管理模块编译的各个阶段，灵活的在处理的不同阶段触发plugin的预先定义的钩子。 仓库地址：github github readme里有详细的使用文档 本文通过自己使用的demo详细讲解 tapable 包含了如下api const { SyncHook, SyncBailHook, SyncWaterfallHook,
图解Webpack——实现Plugin
wang_yu_shun的博客
05-26 352
关注公众号“执鸢者”，回复“书籍”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频。面试工作加分项!Plugin是webpack生态系统的重要组成部分，其目的是解决loader...
干货！撸一个webpack插件(内含tapable详解+webpack流程)
liubangbo的专栏
06-02 528
文章转自：干货！撸一个webpack插件(内含tapable详解+webpack流程) - 掘金Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类。Tapable暴露出挂载的方法，使我们能 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 、等都是继承于类。(如下图所示)tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子。 2.使用 tap/ta
"深入理解Webpack插件机制及优化实践：同步与异步钩子详解
首先，我们需要了解Webpack的核心模块tapable。tapable是一个用于实现事件流机制的“钩子”，它主要分为两种类型：“同步”和“异步”，其中“异步”又分为“并行”和“串行”。在“同步”类型的钩子中，我们常用到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值