.20-浅析webpack源码之compile流程-Template模块vnsc585

时间:2019-05-11 09:40来源:计算机教程
这里的编译前指的是开始触发主要的事件流this-compilaiton、compilation之前,由于还有一些准备代码,这一节全部弄出来。 模块基本上只走构造函数,具体的方法调用的时候再具体讲解。

  这里的编译前指的是开始触发主要的事件流this-compilaiton、compilation之前,由于还有一些准备代码,这一节全部弄出来。

vnsc5858威尼斯城官网 1

  模块基本上只走构造函数,具体的方法调用的时候再具体讲解。

  上一节NormalModuleFactory模块的构造函数中,在处理完rules后,注入两个事件流就结束了,所以可以回到如下代码:

createNormalModuleFactory() {
    // 构造完成
    const normalModuleFactory = new NormalModuleFactory(this.options.context, this.resolvers, this.options.module || {});
    // 该事件流默认是没有的
    this.applyPlugins("normal-module-factory", normalModuleFactory);
    return normalModuleFactory;
}

  由于没有对应的事件流,所以会回到params参数的构建:

newCompilationParams() {
    const params = {
        // done
        normalModuleFactory: this.createNormalModuleFactory(),
        contextModuleFactory: this.createContextModuleFactory(),
        compilationDependencies: []
    };
    return params;
}

  这里的contextModuleFactory模块并没有任何初始化好讲的,简单贴一下代码跳过:

createContextModuleFactory() {
    const contextModuleFactory = new ContextModuleFactory(this.resolvers, this.inputFileSystem);
    this.applyPlugins("context-module-factory", contextModuleFactory);
    return contextModuleFactory;
}
class ContextModuleFactory extends Tapable {
    constructor(resolvers) {
        super();
        this.resolvers = resolvers;
    };
    // methods...
}

  完成了params对象的构建后,会回到compile函数,继续触发其余的事件流:

compile(callback) {
    const params = this.newCompilationParams();
    // 暂无
    this.applyPluginsAsync("before-compile", params, err => {
        if (err) return callback(err);
        // 暂无
        this.applyPlugins("compile", params);
        const compilation = this.newCompilation(params);
        this.applyPluginsParallel("make", compilation, err => { /**/ });
    });
}

  然而在打包中,'before-compile'、'compile'事件流是空的,代码会继续下面一行:

const compilation = this.newCompilation(params);

  这行代码源码如下:

createCompilation() {
    return new Compilation(this);
}

newCompilation(params) {
    // 生成一个Compilation类
    const compilation = this.createCompilation();
    // 空对象{}
    compilation.fileTimestamps = this.fileTimestamps;
    // 空对象{}
    compilation.contextTimestamps = this.contextTimestamps;
    // undefined
    compilation.name = this.name;
    // 空对象{}
    compilation.records = this.records;
    // 空数组[]
    compilation.compilationDependencies = params.compilationDependencies;
    // 编译
    this.applyPlugins("this-compilation", compilation, params);
    this.applyPlugins("compilation", compilation, params);
    return compilation;
}

  除去第一行代码,其余的都是进行属性挂载,在初次打包时都是空的对象或数组,所以作用也看不出,后面再进行详解。

 

Compilation

  剩余的就是Compilation对象的实例化,只过构造函数,源码如下:

class Compilation extends Tapable {
    constructor(compiler) {
        super();
        // 获取配置属性
        this.compiler = compiler;
        this.resolvers = compiler.resolvers;
        this.inputFileSystem = compiler.inputFileSystem;

        const options = this.options = compiler.options;
        this.outputOptions = options && options.output;
        this.bail = options && options.bail;
        this.profile = options && options.profile;
        this.performance = options && options.performance;
        // 引入模板解析模块
        this.mainTemplate = new MainTemplate(this.outputOptions);
        this.chunkTemplate = new ChunkTemplate(this.outputOptions);
        this.hotUpdateChunkTemplate = new HotUpdateChunkTemplate(this.outputOptions);
        this.moduleTemplate = new ModuleTemplate(this.outputOptions);

        this.semaphore = new Semaphore(options.parallelism || 100);

        this.entries = [];
        // ...其余属性初始化
    };
    // methods...
}

  构造函数中主要有三块内容:

1、获取配置文件中的一些属性

2、引入模板解析的辅助模块

3、初始化其余本地属性

  配置文件的属性获取与初始化本地属性跳过,这里简单过一下几个辅助模块,分别为:MainTemplate、ChunkTemplate、HotUpdateChunkTemplate、ModuleTemplate,从名字应该能看出作用了吧?

 

MainTemplate

  源码简化如下:

// require function shortcuts:
// __webpack_require__.s = the module id of the entry point
// __webpack_require__.c = the module cache
// __webpack_require__.m = the module functions
// __webpack_require__.p = the bundle public path
// __webpack_require__.i = the identity function used for harmony imports
// __webpack_require__.e = the chunk ensure function
// __webpack_require__.d = the exported propery define getter function
// __webpack_require__.o = Object.prototype.hasOwnProperty.call
// __webpack_require__.n = compatibility get default export
// __webpack_require__.h = the webpack hash
// __webpack_require__.oe = the uncatched error handler for the webpack runtime
// __webpack_require__.nc = the script nonce

class MainTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
        this.plugin("startup", (source, chunk, hash) => { /**/ });
        this.plugin("render", (bootstrapSource, chunk, hash, moduleTemplate, dependencyTemplates) => { /**/ });
        this.plugin("local-vars", (source, chunk, hash) => { /**/ });
        this.plugin("require", (source, chunk, hash) => { /**/ });
        this.plugin("module-obj", (source, chunk, hash, varModuleId) => { /**/ });
        this.plugin("require-extensions", (source, chunk, hash) => { /**/ });
        this.requireFn = "__webpack_require__";
    };
    render(hash, chunk, moduleTemplate, dependencyTemplates) { /**/ }
    renderRequireFunctionForModule(hash, chunk, varModuleId) { /**/ }
    renderAddModule(hash, chunk, varModuleId, varModule) { /**/ }
    renderCurrentHashCode(hash, length) { /**/ }
    entryPointInChildren(chunk) { /**/ }
    getPublicPath(options) { /**/ }
    updateHash(hash) { /**/ }
    updateHashForChunk(hash, chunk) { /**/ }
    useChunkHash(chunk) { /**/ }
};

  注意头部的注释,这里解释了打包后文件中模块生成函数__webpack_require__上各个参数的意义,属于Template的主模块。

  最后的requireFn就是那个函数的名字,如果改了打包后文件的名字也会变哦,演示一下:

vnsc5858威尼斯城官网 2

  执行一下webpack指令,会看到打包文件如下:

vnsc5858威尼斯城官网 3

  还挺好玩的。

ChunkTemplate

class ChunkTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
    };
    render(chunk, moduleTemplate, dependencyTemplates) {/**/};
    updateHash(hash) {/**/};
    updateHashForChunk(hash, chunk) {/**/};
};

HotUpdateChunkTemplate

class HotUpdateChunkTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
    };
    render(id, modules, removedModules, hash, moduleTemplate, dependencyTemplates) { /**/ };
    updateHash(hash) { /**/ };
};

ModuleTemplate

class ModuleTemplate extends Template {
    constructor(outputOptions) {
        super(outputOptions);
    }
    render(module, dependencyTemplates, chunk) { /**/ }
    updateHash(hash) { /**/ }
};

  这三个模块都是辅助用,简单看一下方法有个印象就行了。

  可以注意到4个模块都有一个爹,叫做Template。

  这个模块属于纯工具模块,内部定义了大量的静态方法以便操作字符串,这里讲一下得了,不然这节没啥内容,源码整理后如下:

"use strict";

const Tapable = require("tapable");
const ConcatSource = require("webpack-sources").ConcatSource;

const START_LOWERCASE_ALPHABET_CODE = "a".charCodeAt(0);
// ...其余常量定义

module.exports = class Template extends Tapable {
    constructor(outputOptions) {
        super();
        this.outputOptions = outputOptions || {};
    };
    static getFunctionContent(fn) { /**/ };
    static toIdentifier(str) { /**/ };
    static toPath(str) { /**/ };
    static numberToIdentifer(n) { /**/ };
    indent(str) { /**/ }
    prefix(str, prefix) { /**/ }
    asString(str) { /**/ }
    getModulesArrayBounds(modules) { /**/ }
    renderChunkModules(chunk, moduleTemplate, dependencyTemplates, prefix) { /**/ }
};
function stringifyIdSortPredicate(a, b) { /**/ }
function moduleIdIsNumber(module) { /**/ }

  内部主要包括四部分:

1、常量定义

2、静态方法

3、工具方法

4、内部函数

  一个一个来。

 

常量const

// a的Unicode编码 => 97
const START_LOWERCASE_ALPHABET_CODE = "a".charCodeAt(0);
// A的Unicode编码 => 65
const START_UPPERCASE_ALPHABET_CODE = "A".charCodeAt(0);
// 122 - 97   1 = 26 返回字母数量
const DELTA_A_TO_Z = "z".charCodeAt(0) - START_LOWERCASE_ALPHABET_CODE   1;
// 匹配函数内容
const FUNCTION_CONTENT_REGEX = /^functions?()s?{n?|n?}$/g;
// 全行匹配tab制表符
const INDENT_MULTILINE_REGEX = /^t/mg;
// 匹配非大小写字母$_开头
const IDENTIFIER_NAME_REPLACE_REGEX = /^[^a-zA-Z$_]/;
// 匹配非大小写字母数字$_
const IDENTIFIER_ALPHA_NUMERIC_NAME_REPLACE_REGEX = /[^a-zA-Z0-9$_]/g;
// 神奇的字符 已经不知道匹配的是啥了
const PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=-^°] /g;
// 匹配以-开始或结尾
const MATCH_PADDED_HYPHENS_REPLACE_REGEX = /^-|-$/g;

  大部分都非常简单,有两个比较特殊,一个是匹配函数内容,这个需要配合静态方法来讲解。

  另一个就是PATH_NAME_NORMALIZE_REPLACE_REGEX,里面有几个字符可能这辈子在代码里都不会看到吧……

 

静态方法

class Template extends Tapable {
    constructor(outputOptions) { /**/ };
    // 抽取函数内容
    static getFunctionContent(fn) {
        return fn.toString().replace(FUNCTION_CONTENT_REGEX, "").replace(INDENT_MULTILINE_REGEX, "");
    };
    // 头部数字、所有的特殊字符置换为'_'
    static toIdentifier(str) {
        if (typeof str !== "string") return "";
        return str.replace(IDENTIFIER_NAME_REPLACE_REGEX, "_").replace(IDENTIFIER_ALPHA_NUMERIC_NAME_REPLACE_REGEX, "_");
    };
    // 特殊字符置换为'-'
    // 去掉头尾的'-'
    static toPath(str) {
        if (typeof str !== "string") return "";
        return str.replace(PATH_NAME_NORMALIZE_REPLACE_REGEX, "-").replace(MATCH_PADDED_HYPHENS_REPLACE_REGEX, "");
    };
    // 数字转换为字母
    static numberToIdentifer(n) {
        // n ∈ [0,26) 返回 a-z
        if (n < DELTA_A_TO_Z) return String.fromCharCode(START_LOWERCASE_ALPHABET_CODE   n);
        // n ∈ [26,52) 返回 A-Z
        n -= DELTA_A_TO_Z;
        if (n < DELTA_A_TO_Z) return String.fromCharCode(START_UPPERCASE_ALPHABET_CODE   n);
        // n ∈ [52,正无穷大) 返回 '_   (n-52)'
        n -= DELTA_A_TO_Z;
        return "_"   n;
    }
}

  也非常的简单,这里每一个都举个小例子:

1、getFunctionContent

const fn1 = function() {
    console.log(1);
};
// console.log(1)
const result = Template.getFunctionContent(fn1.toString());

  这个方法就是抽取出函数内容,注意,必须是函数表达式,使用箭头函数或者具名函数将失效。

const fn1 = () => {
    console.log(1);
};
/*  失败
    () => {
        console.log(1);
    }
*/
const result = Template.getFunctionContent(fn1.toString());

const fn1 = function fn1() {
    console.log(1);
};
/*  失败
    function fn1() {
        console.log(1);
    }
*/
const result = Template.getFunctionContent(fn1.toString());

2、toIdentifier

// __1_2_3_4_5_6
const result = Template.toIdentifier('0/1.2,3;4[5]6');

3、toPath

// d-workspace-doc
const result = Template.toPath('d://workspace//doc//');

vnsc5858威尼斯城官网,4、numberToIdentifer

// a
const result = Template.numberToIdentifer(0);
// E
const result2 = Template.numberToIdentifer(30);
// _48
const result3 = Template.numberToIdentifer(100);

  简单易懂,包教包会!

 

工具方法

class Template {
    indent(str) {
        // 数组map处理
        if (Array.isArray(str)) {
            return str.map(this.indent.bind(this)).join("n");
        } else {
            // 去除右空白 实验性方法
            str = str.trimRight();
            if (!str) return "";
            var ind = (str[0] === "n" ? "" : "t");
            // 两个制表符 
            return ind   str.replace(/n([^n])/g, "nt$1");
        }
    }
    prefix(str, prefix) {
        // 传入数组换行拼接
        if (Array.isArray(str)) {
            str = str.join("n");
        }
        // 去除两侧空白
        str = str.trim();
        if (!str) return "";
        const ind = (str[0] === "n" ? "" : prefix);
        // 加前缀
        return ind   str.replace(/n([^n])/g, "n"   prefix   "$1");
    }
    asString(str) {
        // 数组换行拼接或返回原字符串
        if (Array.isArray(str)) {
            return str.join("n");
        }
        return str;
    }
}

  前三个比较简单,直接看源码就懂了。

1、indent

  这个方法简单讲解就是把每行往后推两个制表符,如果传入字符数组则如下所示:

const tmp = new Template();
const str = ['a', 'b', 'c'];
/*
        a
        b
        c
*/
const result = tmp.indent(str);

2、prefix

  简单讲就是给字符串加前缀:

const tmp = new Template();
// -a
const result = tmp.prefix(`a`, `-`);

3、asString

  传入数组会分别进行换行拼接,非数组直接返回:

const tmp = new Template();
/*
a
b
c
*/
const result = tmp.asString(['a', 'b', 'c']);

4、getModulesArrayBounds

Template.prototype.getModulesArrayBounds = (modules) => {
    // typeof module.id === 'number'
    if (!modules.every(moduleIdIsNumber))
        return false;
    var maxId = -Infinity;
    var minId = Infinity;
    // 获取modules中的最大与最小id
    // 一个模块对应一个id
    modules.forEach(function(module) {
        if (maxId < module.id) maxId = module.id;
        if (minId > module.id) minId = module.id;
    });
    // 当最小id小于16   位数 置0
    if (minId < 16   (""   minId).length) {
        // add minId x ',' instead of 'Array(minId).concat(...)'
        minId = 0;
    }
    // map返回每一个module.id位数 2
    // reduce将数组元素相加 起始值为-1
    var objectOverhead = modules.map(function(module) {
        var idLength = (module.id   "").length;
        return idLength   2;
    }).reduce(function(a, b) {
        return a   b;
    }, -1);
    // 这里的应用到实际调用的时候再看吧
    var arrayOverhead = minId === 0 ? maxId : 16   (""   minId).length   maxId;
    return arrayOverhead < objectOverhead ? [minId, maxId] : false;
}

  这个函数并不复杂,但是不懂是如何应用的。

5、renderChunkModules

  这个没法单独讲,调用的时候做讲解。

 

内部函数

// 这是按字符串排序
// 即 2 > 11
function stringifyIdSortPredicate(a, b) {
    var aId = a.id   "";
    var bId = b.id   "";
    if (aId < bId) return -1;
    if (aId > bId) return 1;
    return 0;
}
// 这个工具方法有使用
function moduleIdIsNumber(module) {
    return typeof module.id === "number";
}

  比较简单。

 

  至此,该模块内容基本完事,有一个方法需要在用的时候做解析。

  接下来几节就将正式进入编译阶段。

编辑:计算机教程 本文来源:.20-浅析webpack源码之compile流程-Template模块vnsc585

关键词: