基于数据结构从源码解析webpack核心模块tapable

最新推荐文章于 2024-05-16 23:13:42 发布

qdmoment

最新推荐文章于 2024-05-16 23:13:42 发布

阅读量312

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qdmoment/article/details/102833305

版权

webpack 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

webpack作为前端打包的重要工具之一，我们有必要深入掌握webpack的底层数据结构。官方文档上直接给出了webpack的核心模块tapable,但是并没有给出特别详细的介绍其实现原理和内部实现，本文从源码触发，来解析下tapable的数据结构和方法属性，这对于掌握webpack打包机制的理解是很有帮助的。

总览：

hook.js数据结构：

  constructor(args) {
		if (!Array.isArray(args)) args = [];
		this._args = args;
		this.taps = [];
		this.interceptors = [];
		this.call = this._call;
		this.promise = this._promise;
		this.callAsync = this._callAsync;
		this._x = undefined;
	}

两个集合，taps集合，interceptors集合，并定义了三个操作tap的方法tap, tapAsync, tapPromise,对应的还有三个创建委托函数(将监听函数转化为字符串)的方法_call, _promise, _callAsync

HookCodeFactory

各种钩子的工厂类基础类，每个钩子的工厂类会继承HookCodeFactory。比如syncHook

const Hook = require("./Hook");
const HookCodeFactory = require("./HookCodeFactory");

class SyncHookCodeFactory extends HookCodeFactory {
	content({ onError, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			onError: (i, err) => onError(err),
			onDone,
			rethrowIfPossible
		});
	}
}

const factory = new SyncHookCodeFactory();

class SyncHook extends Hook {
	tapAsync() {
		throw new Error("tapAsync is not supported on a SyncHook");
	}

	tapPromise() {
		throw new Error("tapPromise is not supported on a SyncHook");
	}

	compile(options) {
		factory.setup(this, options);
		return factory.create(options);
	}
}

module.exports = SyncHook;

说明：各种钩子继承Hook类之后，会定义compile方法，该方法调用了工厂类实例，最终和HookCodeFactory联系起来，在各种钩子上去执行HookCodeFactory的方法

HookCodeFactory的方法：

主要实现了串行，并行，循环，执行单个监听函数的方法，也就是taps出栈的方法

HookMap的数据结构

  constructor(factory) {
		this._map = new Map();
		this._factory = factory;
		this._interceptors = [];
	}

可以看出，在hookMap内定义了字典的数据结构来存储hook实例

  for(key) {
		const hook = this.get(key);
		if (hook !== undefined) {
			return hook;
		}
		let newHook = this._factory(key);
		const interceptors = this._interceptors;
		for (let i = 0; i < interceptors.length; i++) {
			newHook = interceptors[i].factory(key, newHook);
		}
		this._map.set(key, newHook);
		return newHook;
	}

for方法将传入的factory的hook设置到字典

MultiHook

    constructor(hooks) {
		this.hooks = hooks;
	}

	tap(options, fn) {
		for (const hook of this.hooks) {
			hook.tap(options, fn);
		}
	}

	tapAsync(options, fn) {
		for (const hook of this.hooks) {
			hook.tapAsync(options, fn);
		}
	}

	tapPromise(options, fn) {
		for (const hook of this.hooks) {
			hook.tapPromise(options, fn);
		}
	}

批量操作hooks