webpack4.0 Tapable

Webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，Tapable有点类似于nodejs的events库，核心原理也是依赖发布订阅模式(本节内容旨在为后续文章——手写webpack做基础用，内容略枯燥，可跳过)

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

1.SyncHook （普通同步钩子）

SyncHook类似发布订阅模式，通俗的来讲，依次注册多个事件，然后触发，注册的事件依次执行

//这是tapable自己的SyncHook
tap.js
let { SyncHook } = require("tapable");

class Lesson {
  constructor() {
    this.hooks = {
      arch: new SyncHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化,数组中可以传递多个参数，当然，执行的时候，你就必须传递对应数量的实参
    };
  }
  tap() {
    //注册监听事件
    this.hooks.arch.tap("aaa", function(a) {  // 'aaa'和'bbb'是事件标识，没有别的意义
      console.log("aaa", a);
    });
    this.hooks.arch.tap("bbb", function(a) {
      console.log("bbb", a);
    });
  }
  start() {
    this.hooks.arch.call("lc");  // 此处的‘lc’就对应了上边的‘name’
  }
}

let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子

运行

231824.png
现在，我们来模拟SyncHook

//syncHook.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('aaa', function(name){
  console.log('aaa', name);
})
hook.tap("bbb", function(name) {
  console.log("bbb", name);
});
hook.call('lc') //依次执行tasks中的函数

2.SyncBailHook(同步“熔断”钩子)

执行一个钩子的时候，有一个判断机制，是否执行下一个钩子

//tap.js
let { SyncBailHook } = require("tapable");

class Lesson {
  constructor() {
    this.hooks = {
      arch: new SyncBailHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化
    };
  }
  tap() {
    //注册监听事件
    this.hooks.arch.tap("aaa", function(a) {
      // 'aaa'和'bbb'是事件标识，没有别的意义
      console.log("aaa", a);
      return "我不想往下执行了";  // 当某个钩子返回的不是“undefined”的时候，那么运行将在此处截至，后边的钩子不会执行。
    });
    this.hooks.arch.tap("bbb", function(a) {
      console.log("bbb", a);
    });
  }
  start() {
    this.hooks.arch.call("lc");
  }
}

let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子

运行后

33941.png
模拟

//SyncBailHook.js
class SyncBailHook {
  // 同步钩子
  constructor(args) {
    //args => ["name"];
    this.tasks = [];
  }
  tap(name, task) {
    this.tasks.push(task);
  }
  call(...args) {
    let ret; //当前这个函数的返回值
    let index = 0; // 当前要执行第一个
    do {
      ret = this.tasks[index++](...args);
    } while (ret === undefined && index < this.tasks.length); //返回undefined或者没有把tasks执行完
  }
}

let hook = new SyncBailHook(["name"]);

hook.tap("aaa", function(name) {
  console.log("aaa", name);
  return "不往后执行了";
});
hook.tap("bbb", function(name) {
  console.log("bbb", name);
});
hook.call("lc");

3. SyncWaterfallHook （上一个函数与下一个函数有关联（上一个的返回值会交给下一个））

//tap.js
let { SyncWaterfallHook } = require("tapable");

class Lesson {
  constructor() {
    this.hooks = {
      arch: new SyncWaterfallHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化
    };
  }
  tap() {
    //注册监听事件
    this.hooks.arch.tap("aaa", function(a) {
      // 'aaa'和'bbb'是事件标识，没有别的意义
      console.log("aaa", a);
      return "后边的函数会用到我";
    });
    this.hooks.arch.tap("bbb", function(data) {
      console.log("bbb", data);
    });
  }
  start() {
    this.hooks.arch.call("lc");
  }
}

let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子

结果：

4934.png
可以看到，第二个函数接收到了第一个的返回结果，并且将其打印了出来。
mock

//mock.js
class SyncWaterfallHook {
  // 同步钩子
  constructor(args) {
    //args => ["name"];
    this.tasks = [];
  }
  tap(name, task) {
    this.tasks.push(task);
  }
  call(...args) {
    let [first, ...others] = this.tasks;
    let ret = first(...args);
    others.reduce((prev, next) => {
      return next(prev);
    }, ret);
  }
}

let hook = new SyncWaterfallHook(["name"]);

hook.tap("aaa", function(name) {
  console.log("aaa", name);
  return "我是第一个返回值";
});
hook.tap("bbb", function(data) {
  console.log("bbb", data);
  return "我是第二个返回值";
});
hook.tap("ccc", function(data) {
  console.log("ccc", data);
});
hook.call("lc");

结果

00114.png

4.SyncLoopHook (遇到某个钩子，会循环执行)

//SyncLoopHook.js
let { SyncLoopHook } = require("tapable");
// 同步遇到某个不返回undefined的监听函数会多次执行
class Lesson {
  constructor() {
    this.index = 0;
    this.hooks = {
      arch: new SyncLoopHook(["name"]) //此处的“name”,只是为了方便开发者阅读，语义化
    };
  }
  tap() {
    //注册监听事件
    this.hooks.arch.tap("aaa", a => {
      // 'aaa'和'bbb'是事件标识，没有别的意义
      console.log("aaa", a);
      return ++this.index === 3 ? undefined : "执行后边的";
    });
    this.hooks.arch.tap("bbb", function(data) {
      console.log("bbb", data);
    });
  }
  start() {
    this.hooks.arch.call("lc");
  }
}

let l = new Lesson();
l.tap(); // 注册这两个事件
l.start(); // 启动钩子

结果：

200643.png
模拟

// mock.js
class SyncLoopHook {
  // 同步钩子
  constructor(args) {
    //args => ["name"];
    this.tasks = [];
  }
  tap(name, task) {
    this.tasks.push(task);
  }
  call(...args) {
    this.tasks.forEach(task => {
      let ret;
      do {
        ret = task(...args);
      } while (ret !== undefined);
    });
  }
}

let hook = new SyncLoopHook(["name"]);

let total = 0;

hook.tap("aaa", function(name) {
  console.log("aaa", name);
  return ++total === 3 ? undefined : "继续执行次函数";
});
hook.tap("bbb", function(name) {
  console.log("bbb", name);
});
hook.tap("ccc", function(name) {
  console.log("ccc", name);
});
hook.call("lc");

结果：

001351.png