轻松搞定Tapable

592 阅读1分钟

往期文章:

安装 tapable

  • npm install tapable --save

tapable实际例子演示

  • 定义一个Car方法,在内部hooks上新建钩子,分别是同步钩子accelerate,brake(accelerate接受一个参数)、异步钩子calculateRoutes
  • 使用钩子对应的绑定和执行方法
  • calculateRoutes使用tapAsync可以返回一个promise对象
const { SyncHook, AsyncSeriesHook } = require('tapable')

class Car {
  constructor() {
    this.hooks = {
      accelerate: new SyncHook(['newspeed']),
      brake: new SyncHook(),
      calculateRoutes: new AsyncSeriesHook(["source", "target", "routesList"])
    }
  }
}

const myCar = new Car()

//绑定同步钩子
myCar.hooks.brake.tap("WarningLampPlugin", () => console.log('WarningLampPlugin'));

//绑定同步钩子 并传参
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));

//绑定一个异步Promise钩子
myCar.hooks.calculateRoutes.tapAsync("tapPromise", (source, target, routesList, callback) => {
  // return a promise
  return new Promise((resolve,reject)=>{
      setTimeout(()=>{
          const msg = `tapPromise to ${source} ${target} ${routesList}`
          callback(msg)
      },1000)
  })
});

myCar.hooks.brake.call(); // WarningLampPlugin
myCar.hooks.accelerate.call(10); // Accelerating to 10

//执行异步钩子
myCar.hooks.calculateRoutes.promise('Async', 'hook', 'demo').then(data => {
  console.log(data);// tapPromise to Async hook demo
}, err => {
  console.error(err);
});

webpack-plugin使用tapable

  • Compiler.js
const {
  SyncHook,
  AsyncSeriesHook
} = require('tapable');

module.exports = class Compiler {
  constructor() {
    this.hooks = {
      accelerate: new SyncHook(['newspeed']),
      brake: new SyncHook(),
      calculateRoutes: new AsyncSeriesHook(["source", "target", "routesList"])
    }
  }
  run(){
    this.accelerate(10)
    this.break()
    this.calculateRoutes('Async', 'hook', 'demo')
  }
  accelerate(speed) {
    this.hooks.accelerate.call(speed);
  }
  break() {
    this.hooks.brake.call();
  }
  calculateRoutes() {
    this.hooks.calculateRoutes.promise(...arguments).then(() => {
    }, err => {
      console.error(err);
    });
  }
}
  • my-plugin.js
const Compiler = require('./compiler')

class MyPlugin {
  constructor() {}
  apply(compiler) {
    compiler.hooks.brake.tap("WarningLampPlugin", () => console.log('WarningLampPlugin'));
    compiler.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
    compiler.hooks.calculateRoutes.tapPromise("calculateRoutes tapPromise", (source, target, routesList, callback) => {
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          console.log(`tapPromise to ${source} ${target} ${routesList}`)
          resolve();
        },1000)
      })
    });
  }
}

const myPlugin = new MyPlugin();

const options = {
  plugins: [myPlugin]
}

const compiler = new Compiler();

for (const plugin of options.plugins) {
  if (typeof plugin === "function") {
      plugin.call(compiler, compiler);
  } else {
      plugin.apply(compiler);
  }
}

compiler.run()

❤️ 加入我们

字节跳动 · 幸福里团队

Nice Leader:高级技术专家、掘金知名专栏作者、Flutter中文网社区创办者、Flutter中文社区开源项目发起人、Github社区知名开发者,是dio、fly、dsBridge等多个知名开源项目作者

期待您的加入,一起用技术改变生活!!!

招聘链接: job.toutiao.com/s/JHjRX8B