浅析webpack源码之Tapable粗解（五）

打开compile

class Compiler extends Tapable {
	constructor(context) {
	    super();
	    	this.hooks = {
	    	    //...
	    	}
	}
}

Compiler是个构造函数，定义了一些静态属性和方法

我们先看 Tapable

Tapable在node_modules插件下 git地址上面写的解释Just a little module for plugins就跟没写一样
在lib/index.js 文件下

exports.__esModule = true;
exports.Tapable = require("./Tapable");
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

我们看到输出的一些对象方法
每一个对应一个模块

而在webpakck Compiler.js下引入的下面

const {
	Tapable,
	SyncHook,
	SyncBailHook,
	AsyncParallelHook,
	AsyncSeriesHook
} = require("tapable");

so，我们先研究引入的对象

tap 的英文单词解释，除了最常用的点击手势之外，还有一个意思是水龙头
进一步可以理解为tapable是管理事件流的意思
借用网上的一张图，tapable是事件管家之所以名称有差距，是版本问题导致的，目前的是1.1.0版本，我们看看git果然证明了v0.2.8以前的全部都是下图函数所示😥看个源码好艰辛我们还是看一看git上的readme.md文档吧

class Car {
	constructor() {
		this.hooks = {
			accelerate: new SyncHook(["newSpeed"]),
			break: new SyncHook(),
			calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
		};
	}

	/* ... */
}

const myCar = new Car();

// 可以理解为trigger触发，consument是消费者的意思
// Use the tap method to add a consument
myCar.hooks.break.tap("WarningLampPlugin", () => warningLamp.on());


myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));

//异步方法
myCar.hooks.calculateRoutes.tapAsync("BingMapsPlugin", (source, target, routesList, callback) => {
	bing.findRoute(source, target, (err, route) => {
		if(err) return callback(err);
		routesList.add(route);
		// call the callback
		callback();
	});
});
// 异步方法
// You can still use sync plugins
myCar.hooks.calculateRoutes.tap("CachedRoutesPlugin", (source, target, routesList) => {
	const cachedRoute = cache.get(source, target);
	if(cachedRoute)
		routesList.add(cachedRoute);
})

上面写的tap对应如下的call方法

class Car {
	/* ... */

	setSpeed(newSpeed) {
		this.hooks.accelerate.call(newSpeed);
	}

	useNavigationSystemPromise(source, target) {
		const routesList = new List();
		return this.hooks.calculateRoutes.promise(source, target, routesList).then(() => {
			return routesList.getRoutes();
		});
	}

	useNavigationSystemAsync(source, target, callback) {
		const routesList = new List();
		this.hooks.calculateRoutes.callAsync(source, target, routesList, err => {
			if(err) return callback(err);
			callback(null, routesList.getRoutes());
		});
	}
}

很像监听者模式，当你call是执行你on的函数，也就是按照这个文档所说的running your plugins

这就是这个插件所做的，当然这个插件还做了异步处理等一些其他的事情之所以用这个插件，是因为能很好的处理时间流异步回调的情况

具体的Tapable如何实现，很复杂

webpack很多核心功能本身是以插件的形式开发的

参考文章

Webpack 源码（一）—— Tapable 和事件流
 浅析webpack源码之Tapable介绍
 git文档
 Tapable中文文档
 webpack源码分析（一）— Tapable插件架构
 探索webpack源码（三）--- Tapable插件使用 2018-04-10

话说看了这么多，感觉还是很凌乱，Tapable到底是怎么做的，以及优点在哪里，我们往下读，也许读着读着就会豁然开朗，所以标题就从Tapable详解到粗解

# 浅析webpack源码之Tapable粗解（五）

# 参考文章

浅析webpack源码之Tapable粗解（五）

参考文章