引言
Tapable 是webpack中的基礎類，類似於node中的EventEmitter，都是註冊監聽，然後收發事件，監聽函式執行的過程，自身可以被繼承或混入到其它模組中。
webpack本質上是一種事件流的機制，它的工作流程就是將各個外掛串聯起來，而實現這一切的核心就是Tapable，webpack中最核心的負責編譯的Compiler和負責建立bundles的Compilation都是Tapable的例項。
所以如果你想了解webpack的原始碼，那麼先來了解一下Tapable這個基礎類顯得尤為必要，那接下來讓我帶你先來了解一下這個類上的常用的 9個鉤子函式吧！
安裝
npm i Tapable -d
複製程式碼hooks分類
常用的鉤子主要包含以下幾種，分為同步和非同步，非同步又分為併發執行和序列執行，如下圖:
hooks詳解
每一個鉤子都是一個建構函式，所有的建構函式都接收一個可選的引數 這個引數是一個陣列，陣列裡面可以放一些引數 例如：‘name’，當觸發hook事件時 需要傳入name 引數，然後監聽函式中可以獲取name引數。
const hook = new Hook([‘name’])
複製程式碼那怎麼註冊事件呢？
根據不同的鉤子函式使用不同的方法註冊事件，常用的註冊事件的方法有：tap, tapPromise, tapAsync。
那怎麼觸發事件呢？
同樣的，也是根據不同的鉤子函式 使用的觸發事件的方法也不相同，常用的觸發事件的方法有：call,promise, callAsync。
Sync*型別的hooks
註冊在該鉤子下面的外掛的執行順序都是順序執行。 只能使用tap註冊，不能使用tapPromise和tapAsync註冊
1、SyncHook
序列同步執行 不關心返回值
複製程式碼用法
const { SyncHook } = require('tapable');
const mySyncHook = new SyncHook(['name', 'age']);
// 為什麼叫tap水龍頭 接收兩個引數，第一個引數是名稱（備註：沒有任何意義） 第二個引數是一個函式 接收一個引數 name這個name和上面的name對應 age和上面的age對應
mySyncHook.tap('1', function (name, age) {
console.log(name, age, 1)
return 'wrong' // 不關心返回值 這裡寫返回值對結果沒有任何影響
});
mySyncHook.tap('2', function (name, age) {
console.log(name, age, 2)
});
mySyncHook.tap('3', function (name, age) {
console.log(name, age, 3)
});
mySyncHook.call('liushiyu', '18');
// 執行的結果
// liushiyu 18 1
// liushiyu 18 2
// liushiyu 18 3
複製程式碼SyncHook原始碼大致實現
class SyncHook {
constructor () {
this.hooks = [];
}
tap (name, fn) {
this.hooks.push(fn)
}
call () {
this.hooks.forEach(hook => hook(...arguments));
}
}
複製程式碼2、SyncBailHook
序列同步執行 有一個返回值不為null就跳過剩下的邏輯
Bail 是保險的意思 有一個出錯就不往下執行了
複製程式碼用法 同SyncHook 的用法
const { SyncBailHook } = require('tapable');
const mySyncBailHook = new SyncBailHook(['name', 'age']);
// 輸出結果
// liushiyu 18 1
// return 的值不是null 所以剩下的邏輯就不執行了
複製程式碼SyncBailHook原始碼大致實現
class SyncBailHook {
constructor () {
this.hooks = [];
}
tap (name, fn) {
this.hooks.push(fn)
}
call () {
for(let i=0; i<this.hooks.length; i++) {
let hook = this.hooks[i];
let result = hook(...arguments);
if (result) {
break;
}
}
}
}
複製程式碼3、SyncWaterfallHook
下一個任務要拿到上一個任務的返回值
複製程式碼用法
const { SyncWaterfallHook } = require('tapable');
const mySyncWaterfallHook = new SyncWaterfallHook(['name']);
mySyncWaterfallHook.tap('1', function (name) {
console.log(name, '1')
return '1'
})
mySyncWaterfallHook.tap('2', function (name) {
console.log(name, '2')
return '2'
})
mySyncWaterfallHook.tap('3', function (name) {
console.log(name, '3')
})
mySyncWaterfallHook.call('liu')
// 輸出結果
// liu 1
// 1 2
// 2 3
複製程式碼SyncWaterfallHook原始碼大致實現
class SyncWaterfallHook {
constructor () {
this.hooks = [];
}
tap (name, fn) {
this.hooks.push(fn)
}
call () {
let result = null
for(let i=0; i< this.hooks.length; i++) {
let hook = this.hooks[i];
if (!i) {
result = hook(...arguments)
} else {
result = hook(result)
}
}
}
}
複製程式碼4、SyncLoopHook
監聽函式返回true表示繼續迴圈，返回undefine表示結束迴圈
複製程式碼用法
const { SyncLoopHook } = require('tapable');
const mySyncLoopHook = new SyncLoopHook(['name']);
let count = 0;
mySyncLoopHook.tap('1', function (name) {
console.log(count++);
if (count < name) {
return true
} else {
return
}
});
mySyncLoopHook.call('4');
// 輸出結果
//0
//1
//2
//3
複製程式碼SyncLoopHook原始碼大致實現
class SyncLoopHook {
constructor () {
this.hook;
}
tap (name, fn) {
this.hook = fn
}
call () {
let result = this.hook(...arguments);
// do{
// result = this.hook(...arguments)
// } while(result)
while(result) {
result = this.hook(...arguments)
}
}
}
複製程式碼Async*型別的hooks
支援tap、tapPromise、tapAsync註冊 每次都是呼叫tap、tapSync、tapPromise註冊不同型別的外掛鉤子，通過呼叫call、callAsync 、promise方式呼叫。其實呼叫的時候為了按照一定的執行策略執行，呼叫compile方法快速編譯出一個方法來執行這些外掛。
非同步併發執行
1、AsyncParallelHook
非同步併發執行
複製程式碼用法
有三種註冊方式
// 第一種註冊方式 tap
myAsyncParallelHook.tap('1', function (name) {
console.log(1, name)
})
myAsyncParallelHook.tap('2', function (name) {
console.log(2, name)
})
myAsyncParallelHook.tap('3', function (name) {
console.log(3, name)
})
myAsyncParallelHook.callAsync('liu', function () {
console.log('over')
});
// 1 'liu'
// 2 'liu'
// 3 'liu'
// over
// 第二種註冊方式 tapAsync 凡事有非同步 必有回撥
console.time('cost')
myAsyncParallelHook.tapAsync('1', function (name, callback) {
setTimeout(function () {
console.log(1, name)
callback()
}, 1000)
// callback()
})
myAsyncParallelHook.tapAsync('2', function (name, callback) {
setTimeout(function () {
console.log(2, name)
callback()
}, 2000)
// callback()
})
myAsyncParallelHook.tapAsync('3', function (name, callback) {
setTimeout(function () {
console.log(3, name)
callback()
}, 3000)
})
myAsyncParallelHook.callAsync('liu', () => {
console.log('over')
console.timeEnd('cost')
});
並行執行 花費的總時間是時間最長的那個
//1 'liu'
//2 'liu'
//3 'liu'
//over
//cost: 3005.083ms
// 第三種註冊方式 tapPromise
console.time('cost')
myAsyncParallelHook.tapPromise('1', function (name) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(1, name)
resolve()
}, 1000)
})
})
myAsyncParallelHook.tapPromise('2', function (name) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(2, name)
resolve()
}, 2000)
})
})
myAsyncParallelHook.tapPromise('3', function (name) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(3, name)
resolve()
}, 3000)
})
})
myAsyncParallelHook.promise('liu').then(function () {
console.log('ok')
console.timeEnd('cost')
}, function () {
console.log('error')
console.timeEnd('cost')
});
// 1 'liu'
// 2 'liu'
// 3 'liu'
// ok
// cost: 3001.903ms
複製程式碼...
2、AsyncParallelBailHook
有一個失敗了 其他的都不用走了
複製程式碼用法
const { AsyncParallelBailHook } = require('tapable');
const myAsyncParallelBailHook = new AsyncParallelBailHook(['name']);
// 第一種註冊方式 tap
myAsyncParallelBailHook.tap('1', function (name) {
console.log(1, name)
return 'wrong'
})
myAsyncParallelBailHook.tap('2', function (name) {
console.log(2, name)
})
myAsyncParallelBailHook.tap('3', function (name) {
console.log(3, name)
})
myAsyncParallelBailHook.callAsync('liu', function () {
console.log('over')
});
// 1 'liu'
// over
// 第二種註冊方式 tapAsync 凡事有非同步 必有回撥
console.time('cost')
myAsyncParallelBailHook.tapAsync('1', function (name, callback) {
setTimeout(function () {
console.log(1, name)
return 'wrong';// 最後的回撥就不會呼叫了
callback()
}, 1000)
// callback()
})
myAsyncParallelBailHook.tapAsync('2', function (name, callback) {
setTimeout(function () {
console.log(2, name)
callback()
}, 2000)
// callback()
})
myAsyncParallelBailHook.tapAsync('3', function (name, callback) {
setTimeout(function () {
console.log(3, name)
callback()
}, 3000)
})
myAsyncParallelBailHook.callAsync('liu', () => {
console.log('over')
console.timeEnd('cost')
});
// 1 'liu'
// 2 'liu'
// 3 'liu'
// 第三種註冊方式 tapPromise
console.time('cost')
myAsyncParallelBailHook.tapPromise('1', function (name) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(1, name)
reject('wrong');// reject()的引數是一個不為null的引數時，最後的回撥就不會再呼叫了
}, 1000)
})
})
myAsyncParallelBailHook.tapPromise('2', function (name) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(2, name)
resolve()
}, 2000)
})
})
myAsyncParallelBailHook.tapPromise('3', function (name) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(3, name)
resolve()
}, 3000)
})
})
myAsyncParallelBailHook.promise('liu').then(function () {
console.log('ok')
console.timeEnd('cost')
}, function () {
console.log('error')
console.timeEnd('cost')
});
// 1 'liu'
// error
// cost: 1006.030ms
// 2 'liu'
// 3 'liu'
複製程式碼非同步序列執行
1、AsyncSeriesHook
用法
let { AsyncSeriesHook } = require('tapable');
let myAsyncSeriesHook = new AsyncSeriesHook(['name']);
console.time('coast')
myAsyncSeriesHook.tapAsync('1', function (name, cb) {
setTimeout(function () {
console.log('1', name)
cb()
}, 1000)
});
myAsyncSeriesHook.tapAsync('2', function (name, cb) {
setTimeout(function () {
console.log('2', name)
cb()
}, 2000)
});
myAsyncSeriesHook.tapAsync('3', function (name, cb) {
setTimeout(function () {
console.log('3', name)
cb()
}, 3000)
});
myAsyncSeriesHook.callAsync('liu', function () {
console.log('over')
console.timeEnd('coast')
})
// 1 liu
// 2 liu
// 3 liu
// over
// coast: 6010.515ms 非同步序列執行消耗的時間是所有的總和
複製程式碼AsyncSeriesHook原始碼大致實現
class AsyncSeriesHook{
constructor() {
this.hooks = [];
}
tapAsync () {
this.hooks.push(arguments[arguments.length-1]);
}
callAsync () {
let args = Array.from(arguments); //將傳進來的引數轉化為陣列
let done = args.pop(); // 取出陣列的最後一項 即成功後的回撥函式
let index = 0;
let that = this;
function next(err) {
if (err) return done();
let fn = that.hooks[index++];
fn ? fn(...args, next) : done();
}
next()
}
}
複製程式碼2、AsyncSeriesBailHook
用法
// 非同步序列執行
let { AsyncSeriesBailHook } = require('tapable');
let myAsyncSeriesBailHook = new AsyncSeriesBailHook(['name']);
console.time('coast')
myAsyncSeriesBailHook.tapAsync('1', function (name, cb) {
setTimeout(function () {
console.log('1', name)
cb('wrong')
}, 1000)
});
myAsyncSeriesBailHook.tapAsync('2', function (name, cb) {
setTimeout(function () {
console.log('2', name)
cb()
}, 2000)
});
myAsyncSeriesBailHook.tapAsync('3', function (name, cb) {
setTimeout(function () {
console.log('3', name)
cb()
}, 3000)
});
myAsyncSeriesBailHook.callAsync('liu', function () {
console.log('over')
console.timeEnd('coast')
})
// 1 liu
// over
// coast: 1004.175ms
複製程式碼AsyncSeriesBailHook 原始碼的大致實現
class AsyncSeriesBailHook{
constructor() {
this.hooks = [];
}
tapAsync () {
this.hooks.push(arguments[arguments.length-1]);
}
callAsync () {
let args = Array.from(arguments); //將傳進來的引數轉化為陣列
let done = args.pop(); // 取出陣列的最後一項 即成功後的回撥函式
let index = 0;
let that = this;
function next(err) {
if (err) return done();
let fn = that.hooks[index++];
fn ? fn(...args, next) : done();
}
next()
}
}
複製程式碼3、AsyncSeriesWaterfallHook
下一個任務要拿到上一個任務的返回值
複製程式碼用法
// 非同步序列執行
let { AsyncSeriesWaterfallHook } = require('tapable');
let myAsyncSeriesWaterfallHook = new AsyncSeriesWaterfallHook(['name']);
console.time('coast')
myAsyncSeriesWaterfallHook.tapAsync('1', function (name, cb) {
setTimeout(function () {
console.log('1', name)
cb(null, 'aa')
}, 1000)
});
myAsyncSeriesWaterfallHook.tapAsync('2', function (name, cb) {
setTimeout(function () {
console.log('2', name)
cb(null, 'bb')
}, 2000)
});
myAsyncSeriesWaterfallHook.tapAsync('3', function (name, cb) {
setTimeout(function () {
console.log('3', name)
cb(null, 'cc')
}, 3000)
});
myAsyncSeriesWaterfallHook.callAsync('liu', function () {
console.log('over')
console.timeEnd('coast')
})
// 1 liu
// 2 aa
// 3 bb
// over
// coast: 6011.774ms
複製程式碼AsyncSeriesWaterfallHook 原始碼的大致實現
class AsyncSeriesWaterfallHook{
constructor() {
this.hooks = [];
}
tapAsync () {
this.hooks.push(arguments[arguments.length-1]);
}
callAsync () {
let args = Array.from(arguments); //將傳進來的引數轉化為陣列
let done = args.pop(); // 取出陣列的最後一項 即成功後的回撥函式
let index = 0;
let that = this;
function next(err, data) {
if(index>=that.hooks.length) return done();
if (err) return done(err);
let fn = that.hooks[index++];
if (index == 1) {
fn(...args, next)
} else {
fn(data, next)
}
}
next()
}
}
複製程式碼