tapable介绍 - SyncHook

tapable

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。

SyncHook 不关心监听函数的返回值

yarn add tabable

1.use.js

let {SyncHook} = require('tapable')   // 结构同步勾子


class Lesson {
    constructor () {
        this.hooks = {
            // 订阅勾子
            arch: new SyncHook(['name']),

        }
    }
    start () {
        this.hooks.arch.call('may')
    }
    tap () {   //  注册监听函数
        this.hooks.arch.tap('node', function (name) {
            console.log('node', name)
        })
        this.hooks.arch.tap('react', function (name) {
            console.log('react', name)
        })
    }
}


let l = new Lesson()

l.tap();  //注册两个函数
l.start() // 启动勾子

1.theory.js

class SyncHook {  // 勾子是同步的
    constructor(args) {  // args => ['name']
        this.tasks = []
    }
    tap (name, task) {
        this.tasks.push(task)
    }
    call (...args) {
        this.tasks.forEach((task) => task(...args))
    }
}

let hook = new SyncHook(['name'])

hook.tap('react', function (name) {
    console.log('react', name);
})


hook.tap('node', function (name) {
    console.log('node', name);
})


hook.call('jw')