代码拉取完成,页面将自动刷新
同步操作将从 zhangrenyang/tapable-demo 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
tap
注册,不能使用tapPromise
和tapAsync
注册串行同步执行,不关心返回值
let {SyncHook} = require('tapable');
let queue = new SyncHook(['name']);
queue.tap('1',function(name){
console.log(name,1);
});
queue.tap('2',function(name){
console.log(name,2);
});
queue.tap('3',function(name){
console.log(name,3);
});
queue.call('zfpx');
串行同步执行,有一个返回值不为null则跳过剩下的逻辑
let {SyncBailHook} = require('tapable');
let queue = new SyncBailHook(['name']);
queue.tap('1',function(name){
console.log(name,1);
return 'Wrong';
});
queue.tap('2',function(name){
console.log(name,2);
});
queue.tap('3',function(name){
console.log(name,3);
});
queue.call('zfpx');
let {SyncWaterfallHook} = require('tapable');
let queue = new SyncWaterfallHook(['name']);
queue.tap('1',function(name){
console.log(arguments);
console.log(name,1);
return 1;
});
queue.tap('2',function(data){
console.log(data,2);
});
queue.tap('3',function(data){
console.log(data,3);
});
queue.call('zfpx');
let {SyncLoopHook} = require('tapable');
let queue = new SyncLoopHook(['name']);
let count = 0;
queue.tap('1',function(name){
console.log(count++);
if(count==3){
return;
}else{
return true;
}
});
queue.call('zfpx');
if(_result0 !== undefined) {
_loop = true;
}
tap
let {AsyncParallelHook} = require('tapable');
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tap('1',function(name){
console.log(1);
});
queue.tap('2',function(name){
console.log(2);
});
queue.tap('3',function(name){
console.log(3);
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tapAsync
let {AsyncParallelHook} = require('tapable');
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
setTimeout(function(){
console.log(1);
callback();
},1000)
});
queue.tapAsync('2',function(name,callback){
setTimeout(function(){
console.log(2);
callback();
},2000)
});
queue.tapAsync('3',function(name,callback){
setTimeout(function(){
console.log(3);
callback();
},3000)
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tapPromise
let {AsyncParallelHook} = require('tapable');
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name,callback){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(1);
resolve();
},1000)
});
});
queue.tapPromise('2',function(name,callback){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(2);
resolve();
},2000)
});
});
queue.tapPromise('3',function(name,callback){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(3);
resolve();
},3000)
});
});
queue.promise('zfpx').then(()=>{
console.timeEnd('cost');
})
let {AsyncParallelBailHook} = require('tapable');
let queue = new AsyncParallelBailHook(['name']);
console.time('cost');
queue.tap('1',function(name){
console.log(1);
return "Wrong";
});
queue.tap('2',function(name){
console.log(2);
});
queue.tap('3',function(name){
console.log(3);
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tap
let {AsyncSeriesHook} = require('tapable');
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tap('1',function(name){
console.log(1);
return "Wrong";
});
queue.tap('2',function(name){
console.log(2);
});
queue.tap('3',function(name){
console.log(3);
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tapAsync
let {AsyncSeriesHook} = require('tapable');
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
setTimeout(function(){
console.log(1);
callback();
},1000)
});
queue.tapAsync('2',function(name,callback){
setTimeout(function(){
console.log(2);
callback();
},2000)
});
queue.tapAsync('3',function(name,callback){
setTimeout(function(){
console.log(3);
callback();
},3000)
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tapPromise
let {AsyncSeriesHook} = require('tapable');
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
return new Promise(function(resolve){
setTimeout(function(){
console.log(1);
resolve();
},1000)
});
});
queue.tapPromise('2',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(2);
resolve();
},2000)
});
});
queue.tapPromise('3',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(3);
resolve();
},3000)
});
});
queue.promise('zfpx').then(err=>{
console.log(err);
console.timeEnd('cost');
});
tap
let {AsyncSeriesBailHook} = require('tapable');
let queue = new AsyncSeriesBailHook(['name']);
console.time('cost');
queue.tap('1',function(name){
console.log(1);
return "Wrong";
});
queue.tap('2',function(name){
console.log(2);
});
queue.tap('3',function(name){
console.log(3);
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tabAsync
let {AsyncSeriesBailHook} = require('tapable');
let queue = new AsyncSeriesBailHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
setTimeout(function(){
console.log(1);
callback('Wrong');
},1000)
});
queue.tapAsync('2',function(name,callback){
setTimeout(function(){
console.log(2);
callback();
},2000)
});
queue.tapAsync('3',function(name,callback){
setTimeout(function(){
console.log(3);
callback();
},3000)
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tapPromise
let {AsyncSeriesHook} = require('tapable');
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(1);
//resolve();
reject();
},1000)
});
});
queue.tapPromise('2',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(2);
resolve();
},2000)
});
});
queue.tapPromise('3',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(3);
resolve();
},3000)
});
});
queue.promise('zfpx').then(err=>{
console.log(err);
console.timeEnd('cost');
},err=>{
console.log(err);
console.timeEnd('cost');
});
tap
let {AsyncSeriesWaterfallHook} = require('tapable');
let queue = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
queue.tap('1',function(name,callback){
console.log(1);
});
queue.tap('2',function(data){
console.log(2,data);
});
queue.tap('3',function(data){
console.log(3,data);
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tapAsync
let {AsyncSeriesWaterfallHook} = require('tapable');
let queue = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
setTimeout(function(){
console.log(1);
callback(null,1);
},1000)
});
queue.tapAsync('2',function(data,callback){
console.log(arguments);
setTimeout(function(){
console.log(data);
callback(null,2);
},2000)
});
queue.tapAsync('3',function(data,callback){
setTimeout(function(){
console.log(data);
callback(null,3);
},3000)
});
queue.callAsync('zfpx',err=>{
console.log(err);
console.timeEnd('cost');
});
tapPromise
let {AsyncSeriesHook} = require('tapable');
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(1);
//resolve();
reject();
},1000)
});
});
queue.tapPromise('2',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(2);
resolve();
},2000)
});
});
queue.tapPromise('3',function(name,callback){
return new Promise(function(resolve){
setTimeout(function(){
console.log(3);
resolve();
},3000)
});
});
queue.promise('zfpx').then(err=>{
console.log(err);
console.timeEnd('cost');
},err=>{
console.log(err);
console.timeEnd('cost');
});
const {Tapable,SyncHook} = require("tapable");
const t = new Tapable();
t.hooks = {
myHook: new SyncHook()
};
let called = 0;
t.plugin("my-hook", () => called++);
t.hooks.myHook.call();
t.plugin("my-hook", () => called += 10);
t.hooks.myHook.call();
console.log(called);
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。