.20-淺析webpack源碼之compile流程-Template模塊

来源:https://www.cnblogs.com/QH-Jimmy/archive/2017/12/27/8119327.html
-Advertisement-
Play Games

這裡的編譯前指的是開始觸發主要的事件流this-compilaiton、compilation之前，由於還有一些準備代碼，這一節全部弄出來。 模塊基本上只走構造函數，具體的方法調用的時候再具體講解。 上一節NormalModuleFactory模塊的構造函數中，在處理完rules後，註入兩個事件流就 ...


　　這裡的編譯前指的是開始觸發主要的事件流this-compilaiton、compilation之前，由於還有一些準備代碼，這一節全部弄出來。

　　模塊基本上只走構造函數，具體的方法調用的時候再具體講解。

　　上一節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就是那個函數的名字，如果改了打包後文件的名字也會變哦，演示一下：

　　執行一下webpack指令，會看到打包文件如下：

　　還挺好玩的。

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 = /^function\s?\(\)\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//');

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, "\n\t$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";
}

　　比較簡單。

 

　　至此，該模塊內容基本完事，有一個方法需要在用的時候做解析。

　　接下來幾節就將正式進入編譯階段。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • react-native 簡介及環境
    概要 react native 環境搭建 hello react native react native 發佈 react native 優勢 1. 不用再學習 OC，Swift，Java，Kotlin 等 2. 復用 react 開發的種種好處 3. 開發體驗好（即時編譯） 4. 編譯出來的是原生 ...
  • android 實現銀聯刷卡機消費後，手動簽名的功能
    幾天前去物管交物業費，物管工作人員說小區引進高新產品，使用銀行卡消費後，不需要拿筆在銀聯機上簽名，直接用手指觸摸實現消費簽名，當時心想，果然是高科技，機子外形如下左圖，簽名如下右圖。 仔細一看，其實就是一個觸摸屏，用戶在上面直接手動簽名，實現這個功能其實並不複雜，我們自定義一個控制項，繼承view,使 ...
  • HBuilder離線打包啟用Chrome Inspect調試
    解決方法： 修改這個文件 assets/data/dcloud_control.xml <msc version="1.9.9.39354" debug="true"><apps><app appid="yourapp" appver="1.0.3"/></apps></msc> 設置debug就可 ...
  • 如何獲取Debug Android Hash Key
    在接入FaceBook第三方登錄的時候，需要獲取Android Hash Key。 Android Hash Key即密鑰散列有兩種，一種是開發秘鑰散列，一種是發佈秘鑰散列。這裡主要介紹如何獲取開發秘鑰散列Debug Android Hash Key。 步驟如下： 1、到https://code.g ...
  • Android基礎_web通信2
    一.移動客服端實現對PC端數據的操作 在PC端模擬一個資料庫，實現用戶的增刪改查，然後在移動客服端實現對PC端資料庫的操作 在PC端建立三個表 用戶表（Users），員工表（Emp）， 部門表（Dept）， User表對應欄位，並設置對應的set/get方法，這裡不一一寫出 Emp表對應欄位 Dep ...
  • 在Android上使用酷狗歌詞API
    參考自http://blog.csdn.net/u010752082/article/details/50810190 代碼先貼出來： 首先說明一下，要搜索到歌詞，需要先搜索歌曲，得到歌曲對應的id和accesskey後才能進行歌詞的獲取。 那麼我們先從搜索歌曲的URL開始說起： 其中的name為搜 ...
  • 【quickhybrid】組件（自定義）API的實現
    前言 前文在API規劃時就已經有提到過組件API這個概念，本文將會介紹它的原理以及實現 理解組件API這個概念 在quick hybrid中，API是按模塊劃分的，如 ，`page 組件` 為什麼叫組件？可以這樣理解，模塊更多的是H5前端的叫法（因為在前端看來不同API分別屬於不同的模塊下）， 而組 ...
  • [求教]利用typescript對Javascript做強類型檢測提示
    近期在學習typescript的時候，發現ts居然可以對原生js做強檢測。發現從v2.3就開始直接了。這讓我感嘆他的變化，又讓我自己感到學習的緩慢。本文章就對他小試牛刀一下。 一、他是的使用與支持 通過閱讀官網的說明，瞭解到他實現驗證是通過jsdoc的註釋結構實現。然後在.js文件頭部加入如下註釋標 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類