Webpack源码阅读之Tapable

2019-08-16 admin

Webpack源码阅读之Tapable

webpack采用Tapable来进行流程控制,在这套体系上,内部近百个插件有条不紊,还能支持外部开发自定义插件来扩展功能,所以在阅读webpack源码前先了解Tapable的机制是很有必要的。

Tapable的基本使用方法就不介绍了,可以参考官方文档

1. 例子

从网上拷贝了一个简单的使用例子:

//main.js
const { SyncHook } = require('tapable')

//创建一个简单的同步串行钩子
let h1 = new SyncHook(['arg1,arg2']);

//在钩子上添加订阅者,钩子被call时会触发订阅的回调函数
h1.tap('A',function(arg){
  console.log('A',arg);
  return 'b'
})
h1.tap('B',function(){
  console.log('b')
})
h1.tap('C',function(){
  console.log('c')
})

//在钩子上添加拦截器
h1.intercept({
  //钩子被call的时候触发
  call: (...args)=>{
     console.log(...args, '-------------intercept call');
  },
  //定义拦截器的时候注册taps
  register:(tap)=>{
     console.log(tap, '------------------intercept register');
  },
  //循环方法
  loop:(...args)=>{
     console.log(...args, '---------------intercept loop')
  },
  //tap调用前触发
  tap:(tap)=>{
     console.log(tap, '---------------intercept tap')
  }
})

//触发钩子
h1.call(6)

2. 调试方法

最直接的方式是在 chrome 中通过断点在关键代码上进行调试,在如何使用 Chrome 调试webpack源码中学到了调试的技巧:

我们可以用 node-inspector 在chrome中调试nodejs代码,这比命令行中调试方便太多了。nodejs 从 v6.x 开始已经内置了一个 inspector,当我们启动的时候可以加上 --inspect 参数即可:

node --inspect app.js

然后打开chrome,打开一个新页面,地址是: chrome://inspect,就可以在 chrome 中调试你的代码了。

如果你的JS代码是执行一遍就结束了,可能没时间加断点,那么你可能希望在启动的时候自动在第一行自动加上断点,可以使用这个参数 --inspect-brk,这样会自动断点在你的第一行代码上。

3. 源码分析

安装好Tapable包,根据上述方法,我们运行如下命令:

node --inspect-brk main.js 

图片描述

3.1 初始化

在构造函数处打上断点,step into可以看到SyncHook继承自Hook,上面定义了一个compile函数。

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);
    }
}

再step into来到Hook.js

class Hook {
    //初始化
    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;
    }
    ...
    }

h1初始化完成:

h1:{
  call: ƒ lazyCompileHook(...args)
  callAsync: ƒ lazyCompileHook(...args)
  interceptors: []
  promise: ƒ lazyCompileHook(...args)
  taps: []
  _args: ["options"]
  _x: undefined
}
3.2 注册观察者

Tapable采用观察者模式来进行流程管理,在钩子上使用tap方法注册观察者,钩子被call时,观察者对象上定义的回调函数按照不同规则触发(钩子类型不同,触发顺序不同)。

Step into tap方法:

//options='A', fn=f(arg)
tap(options, fn) {
        //类型检测
        if (typeof options === "string") options = { name: options };
        if (typeof options !== "object" || options === null)
            throw new Error(
                "Invalid arguments to tap(options: Object, fn: function)"
            );
        //options ==>{type: "sync", fn: fn,name:options}
        options = Object.assign({ type: "sync", fn: fn }, options);
        if (typeof options.name !== "string" || options.name === "")
            throw new Error("Missing name for tap");
      //这里调用拦截器上的register方法,当intercept定义在tap前时,会在这里调用intercept.register(options), 当intercept定义在tap后时,会在intercept方法中调用intercept.register(this.taps)
        options = this._runRegisterInterceptors(options);
        //根据before, stage 的值来排序this.taps = [{type: "sync", fn: fn,name:options}]
        this._insert(options);
    }

当三个观察者注册完成后,h1变为:

{
  call: ƒ lazyCompileHook(...args)
  callAsync: ƒ lazyCompileHook(...args)
  interceptors: []
  promise: ƒ lazyCompileHook(...args)
  taps:[
       0: {type: "sync", fn: ƒ, name: "A"}
    1: {type: "sync", fn: ƒ, name: "B"}
    2: {type: "sync", fn: ƒ, name: "C"}
  ]
  length: 3
  __proto__: Array(0)
  _args: ["options"]
_x: undefined
}
3.3 注册拦截器

在调用h1.intercept() 处step into,可以看到定义的拦截回调被推入this.interceptors中。

intercept(interceptor) {
        this._resetCompilation();
        this.interceptors.push(Object.assign({}, interceptor));
        if (interceptor.register) {
            for (let i = 0; i < this.taps.length; i++)
                this.taps[i] = interceptor.register(this.taps[i]);
        }
    }

此时h1变为:

{
  call: ƒ lazyCompileHook(...args)
  callAsync: ƒ lazyCompileHook(...args)
  interceptors: Array(1)
    0:
    call: (...args) => {…}
    loop: (...args) => {…}
    register: (tap) => {…}
    tap: (tap) => {…}
    __proto__: Object
    length: 1
    __proto__: Array(0)
  promise: ƒ lazyCompileHook(...args)
  taps: Array(3)
    0: {type: "sync", fn: ƒ, name: "A"}
    1: {type: "sync", fn: ƒ, name: "B"}
    2: {type: "sync", fn: ƒ, name: "C"}
    length: 3
    __proto__: Array(0)
  _args: ["options"]
  _x: undefined
}
3.4 钩子调用

在观察者和拦截器都注册后,会保存在this.interceptorsthis.taps中;当我们调用h1.call()函数后,会按照一定的顺序调用它们,现在我们来看看具体的流程,在call方法调用时step into, 会来到Hook.js中的createCompileDelegate函数。

function createCompileDelegate(name, type) {
    return function lazyCompileHook(...args) {
        this[name] = this._createCall(type);
        return this[name](...args);
    };
}

因为_call函数定义在Hook原型上,并通过在构造函数中this.call=this.__call赋值。

Object.defineProperties(Hook.prototype, {
    _call: {
        value: createCompileDelegate("call", "sync"),
        configurable: true,
        writable: true
    },
    _promise: {
        value: createCompileDelegate("promise", "promise"),
        configurable: true,
        writable: true
    },
    _callAsync: {
        value: createCompileDelegate("callAsync", "async"),
        configurable: true,
        writable: true
    }
});

按照执行顺序转到 this._createCall

_createCall(type) {
        return this.compile({
            taps: this.taps,
            interceptors: this.interceptors,
            args: this._args,
            type: type
        });
    }

this.compile()处step into 跳转到SyncHook.js上的compile方法上,其实我们在Hook.js上就可以看到,compile是需要在子类上重写的方法, 在SyncHook上其实现如下:

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

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

const factory = new SyncHookCodeFactory();

factory.setup处step into,可以看到factory.setup(this, options)其实只是把taps上注册的回调推入this._x:

    setup(instance, options) {
        instance._x = options.taps.map(t => t.fn);
    }

factory.create中定义了this.interceptorsthis.taps的具体执行顺序,在这里step into:

//HookFactory.js
create(options) {
        this.init(options);
        let fn;
        switch (this.options.type) {
            case "sync":
                fn = new Function(
                    this.args(),
                    '"use strict";\n' +
                        this.header() +
                        this.content({
                            onError: err => `throw ${err};\n`,
                            onResult: result => `return ${result};\n`,
                            resultReturns: true,
                            onDone: () => "",
                            rethrowIfPossible: true
                        })
                );
                break;
            case "async":
                ....
            case "promise":
                ....
        }
        this.deinit();
        return fn;
    }

可以看到这里是通过new Function构造函数传入this.interceptorsthis.taps动态进行字符串拼接生成函数体执行的。

this.header()中打断点:

header() {
        let code = "";
        if (this.needContext()) {
            code += "var _context = {};\n";
        } else {
            code += "var _context;\n";
        }
        code += "var _x = this._x;\n";
        if (this.options.interceptors.length > 0) {
            code += "var _taps = this.taps;\n";
            code += "var _interceptors = this.interceptors;\n";
        }
        for (let i = 0; i < this.options.interceptors.length; i++) {
            const interceptor = this.options.interceptors[i];
            if (interceptor.call) {
                code += `${this.getInterceptor(i)}.call(${this.args({
                    before: interceptor.context ? "_context" : undefined
                })});\n`;
            }
        }
        return code;
    }

生成的code如下,其执行了拦截器中定义的call回调:

"var _context;
var _x = this._x;
var _taps = this.taps;
var _interceptors = this.interceptors;
_interceptors[0].call(options);

this.content()打断点,可以看到this.content定义在HookCodeFactory中:

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

其返回了定义在子类中的callTapsSeries方法:

callTapsSeries({
        onError,
        onResult,
        resultReturns,
        onDone,
        doneReturns,
        rethrowIfPossible
    }) {
        if (this.options.taps.length === 0) return onDone();
        const firstAsync = this.options.taps.findIndex(t => t.type !== "sync");
        const somethingReturns = resultReturns || doneReturns || false;
        let code = "";
        let current = onDone;
        for (let j = this.options.taps.length - 1; j >= 0; j--) {
            const i = j;
            const unroll = current !== onDone && this.options.taps[i].type !== "sync";
            if (unroll) {
                code += `function _next${i}() {\n`;
                code += current();
                code += `}\n`;
                current = () => `${somethingReturns ? "return " : ""}_next${i}();\n`;
            }
            const done = current;
            const doneBreak = skipDone => {
                if (skipDone) return "";
                return onDone();
            };
            const content = this.callTap(i, {
                onError: error => onError(i, error, done, doneBreak),
                onResult:
                    onResult &&
                    (result => {
                        return onResult(i, result, done, doneBreak);
                    }),
                onDone: !onResult && done,
                rethrowIfPossible:
                    rethrowIfPossible && (firstAsync < 0 || i < firstAsync)
            });
            current = () => content;
        }
        code += current();
        return code;
    }

具体的拼接步骤这里就不详述了,感兴趣可以自己debugger,嘿嘿。最后返回的code为:

var _tap0 = _taps[0];
_interceptors[0].tap(_tap0);
var _fn0 = _x[0];
_fn0(options);
var _tap1 = _taps[1];
_interceptors[0].tap(_tap1);
var _fn1 = _x[1];
_fn1(options);
var _tap2 = _taps[2];
_interceptors[0].tap(_tap2);
var _fn2 = _x[2];
_fn2(options);
var _tap3 = _taps[3];
_interceptors[0].tap(_tap3);
var _fn3 = _x[3];
_fn3(options);

这里定义了taps和其相应的拦截器的执行顺序。

4. webpack调试技巧

当我们调试webpack源码是,经常需要在钩子被call的代码处调试到具体插件的执行过程,可以参考上述过程进行调试,具体步骤为:

图片描述

图片描述

  • 得到生成的动态函数

    (function anonymous(options
    ) {
    "use strict";
      var _context;
      var _x = this._x;
      var _taps = this.taps;
      var _interceptors = this.interceptors;
      _interceptors[0].call(options);
      var _tap0 = _taps[0];
      _interceptors[0].tap(_tap0);
      var _fn0 = _x[0];
      _fn0(options);
      var _tap1 = _taps[1];
      _interceptors[0].tap(_tap1);
      var _fn1 = _x[1];
      _fn1(options);
      var _tap2 = _taps[2];
      _interceptors[0].tap(_tap2);
      var _fn2 = _x[2];
      _fn2(options);
      var _tap3 = _taps[3];
      _interceptors[0].tap(_tap3);
      var _fn3 = _x[3];
      _fn3(options);
    })
    
  • 在fn(options)处打step into

    图片描述

  • 回到tap注册的函数

    h1.tap('A', function (arg) {
        console.log('A',arg);
        return 'b'; 
    })
    

[转载]原文链接:https://segmentfault.com/a/1190000020086522

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72619.html

文章标题:Webpack源码阅读之Tapable

相关文章
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
数据格式之战:JSON vs XML
在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言,简称GML,它主要是为脚本语言定义的一...
2016-01-13
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = [&#x27;name&#x27;, &#x27;age&#x27;, &#x27;sex&#x27;]; var ...
2017-05-27
javascript数据结构与算法之检索算法
查找数据有2种方式,顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高,但是必须是已经排好序的列表元素集合。 一:顺序查找 顺序查找是从列表的第一个元素开始对列表元素逐个进行判断,直到找到...
2017-03-22
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
js面向对象之公有、私有、静态属性和方法详解
现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式的编辑风格,对于闭包、原型总是说不清道不...
2017-03-22
回到顶部