.34-淺析webpack源碼之事件流make(3)

来源:https://www.cnblogs.com/QH-Jimmy/archive/2018/02/23/8461176.html
-Advertisement-
Play Games

新年好呀~過個年光打游戲，function都寫不順溜了。 上一節的代碼到這裡了： 經過長長的resolve，最終也只是解析入口文件的合法路徑信息，然後調用回調函數。 接下來分析回調函數是如何處理返回結果的： 返回的結果有兩部分，一個是loader，一個是文件對應路徑。 對於入口文件的當前解析，不存在 ...


　　新年好呀~過個年光打游戲，function都寫不順溜了。

　　上一節的代碼到這裡了：

// NormalModuleFactory的resolver事件流
this.plugin("resolver", () => (data, callback) => {
    // ...

    asyncLib.parallel( /*...*/ ,
        /* 
            results:
            [ 
                [],
                { 
                    resourceResolveData:
                    { 
                        context: { issuer: '', compiler: undefined },
                        path: 'd:\\workspace\\doc\\input.js',
                        request: undefined,
                        query: '',
                        module: false,
                        file: false,
                        descriptionFilePath: 'd:\\workspace\\doc\\package.json',
                        descriptionFileData: [Object],
                        descriptionFileRoot: 'd:\\workspace\\doc',
                        relativePath: './input.js',
                        __innerRequest_request: undefined,
                        __innerRequest_relativePath: './input.js',
                        __innerRequest: './input.js' 
                    },
                    resource: 'd:\\workspace\\doc\\input.js' 
                } 
            ]
        */
        (err, results) => {
            // ...超多內容
        });
});

　　經過長長的resolve，最終也只是解析入口文件的合法路徑信息，然後調用回調函數。

　　接下來分析回調函數是如何處理返回結果的：

// NormalModuleFactory的resolver事件流
this.plugin("resolver", () => (data, callback) => {
    // ...

    asyncLib.parallel( /*...*/ ,
        (err, results) => {
            if (err) return callback(err);
            // 暫時不存在loaders
            let loaders = results[0];
            const resourceResolveData = results[1].resourceResolveData;
            resource = results[1].resource;

            // 跳過下麵幾部分內容
            // translate option idents
            try {
                loaders.forEach(item => {
                    if (typeof item.options === "string" && /^\?/.test(item.options)) {
                        item.options = this.ruleSet.findOptionsByIdent(item.options.substr(1));
                    }
                });
            } catch (e) {
                return callback(e);
            }

            if (resource === false) {
                // ignored
                return callback(null,
                    new RawModule(
                        "/* (ignored) */",
                        `ignored ${context} ${request}`,
                        `${request} (ignored)`
                    )
                );
            }

            const userRequest = loaders.map(loaderToIdent).concat([resource]).join("!");

            // 嘗試獲取路徑參數
            let resourcePath = resource;
            let resourceQuery = "";
            const queryIndex = resourcePath.indexOf("?");
            if (queryIndex >= 0) {
                resourceQuery = resourcePath.substr(queryIndex);
                resourcePath = resourcePath.substr(0, queryIndex);
            }

            // 很久之前的東西
            const result = this.ruleSet.exec({
                resource: resourcePath,
                resourceQuery,
                issuer: contextInfo.issuer,
                compiler: contextInfo.compiler
            });

            // ...
        });
});

　　返回的結果有兩部分，一個是loader，一個是文件對應路徑。

　　對於入口文件的當前解析，不存在loader，所以會直接跳過開始的幾部分內容，直接進入後面的ruleSet方法處理。

 

ruleSet.exec

　　這個ruleSet是個很久遠的東西了，在18-19節有講，主要是對配置文件中的modules.rules進行二次處理，包裝在一個對象中。

　　這裡的exec方法主要是判斷路徑信息是否符合配置文件中定義的rules並解析返回一個result，方法如下(原型方法改成箭頭函數好看一點)：

exec = (data) => {
    const result = [];
    this._run(data, {
        rules: this.rules
    }, result);
    return result;
}

　　真正的判斷方法是_run，其中data為傳進來的判斷對象，rules為判斷標準，result是返回的結果。

　　簡答過一下內容：

/*
module.rules => 
    [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.css$/,
            loader: 'css!style-loader'
        },
        {
            test: /\.js$/,
            loader: 'babel-loader'
        },
    ]
data =>
    {
        resource: 'd:\\workspace\\doc\\input.js',
        resourceQuery: '',
        issuer: '',
        compiler: undefined 
    }
rule =>
    { 
        rules:
        [   
            { resource: [Function: bound test], use: [Array] },
            { resource: [Function: bound test], use: [Array] },
            { resource: [Function: bound test], use: [Array] } 
        ] 
    }
*/
_run = (data, rule, result) => {
    // 判斷特殊鍵提前返回
    // test conditions
    if (rule.resource && !data.resource)
        return false;
    if (rule.resourceQuery && !data.resourceQuery)
        return false;
    if (rule.compiler && !data.compiler)
        return false;
    if (rule.issuer && !data.issuer)
        return false;
    if (rule.resource && !rule.resource(data.resource))
        return false;
    if (data.issuer && rule.issuer && !rule.issuer(data.issuer))
        return false;
    if (data.resourceQuery && rule.resourceQuery && !rule.resourceQuery(data.resourceQuery))
        return false;
    if (data.compiler && rule.compiler && !rule.compiler(data.compiler))
        return false;

    // ['rules'] => []
    // apply
    const keys = Object.keys(rule).filter((key) => {
        return ["resource", "resourceQuery", "compiler", "issuer", "rules", "oneOf", "use", "enforce"].indexOf(key) < 0;
    });
    keys.forEach((key) => {
        result.push({
            type: key,
            value: rule[key]
        });
    });
    // 依次進入
    if (rule.use) {
        rule.use.forEach((use) => {
            result.push({
                type: "use",
                value: typeof use === "function" ? RuleSet.normalizeUseItemFunction(use, data) : use,
                enforce: rule.enforce
            });
        });
    }
    // 遍歷3個判斷標準
    if (rule.rules) {
        for (let i = 0; i < rule.rules.length; i++) {
            this._run(data, rule.rules[i], result);
        }
    }
    // 跳過
    if (rule.oneOf) {
        for (let i = 0; i < rule.oneOf.length; i++) {
            if (this._run(data, rule.oneOf[i], result))
                break;
        }
    }

    return true;
}

　　這裡會跳過部分代碼，在配置文件的rules中我寫了3個簡單的loader，分別對應js、css、vue尾碼的文件，入口文件為input.js，所以匹配到了babel-loader。

　　獲取到了對應的loader，繼續跑流程：

// NormalModuleFactory的resolver事件流
this.plugin("resolver", () => (data, callback) => {
    // ...

    asyncLib.parallel( /*...*/ , (err, results) => {
        // ...

        /*  
        result => 
            [ 
                { 
                    type: 'use',
                    value: { loader: 'babel-loader' },
                    enforce: undefined 
                } 
            ]
        */
        const result = this.ruleSet.exec({
            resource: resourcePath,
            resourceQuery,
            issuer: contextInfo.issuer,
            compiler: contextInfo.compiler
        });

        const settings = {};
        const useLoadersPost = [];
        const useLoaders = [];
        const useLoadersPre = [];
        result.forEach(r => {
            if (r.type === "use") {
                // enforce代表loader的特殊標記
                if (r.enforce === "post" && !noPostAutoLoaders && !noPrePostAutoLoaders)
                    useLoadersPost.push(r.value);
                else if (r.enforce === "pre" && !noPrePostAutoLoaders)
                    useLoadersPre.push(r.value);
                // 走這條分支
                else if (!r.enforce && !noAutoLoaders && !noPrePostAutoLoaders)
                    useLoaders.push(r.value);
            } else {
                settings[r.type] = r.value;
            }
        });
        // 又是parallel
        asyncLib.parallel([
            this.resolveRequestArray.bind(this, contextInfo, this.context, useLoadersPost, this.resolvers.loader),
            this.resolveRequestArray.bind(this, contextInfo, this.context, useLoaders, this.resolvers.loader),
            this.resolveRequestArray.bind(this, contextInfo, this.context, useLoadersPre, this.resolvers.loader)
        ], (err, results) => {
            if (err) return callback(err);
            loaders = results[0].concat(loaders, results[1], results[2]);
            process.nextTick(() => {
                callback(null, {
                    context: context,
                    request: loaders.map(loaderToIdent).concat([resource]).join("!"),
                    dependencies: data.dependencies,
                    userRequest,
                    rawRequest: request,
                    loaders,
                    resource,
                    resourceResolveData,
                    parser: this.getParser(settings.parser)
                });
            });
        });
    });
});

　　這裡判斷了loader是否存在特殊標記，然後將結果彈入對應的loader數組中。

　　最後再次調用了asyncLib的parallel方法，方法在上一個parallel調用過，但是當初沒有loader，這次有了。

　　看起來就比較複雜，下一節再過。

 

　　把resolveRequestArray過完，方法源碼與參數如下：

/*
    contextInfo => { issuer: '', compiler: undefined }
    context => D:\workspace\doc
    array => [ { loader: 'babel-loader' } ]
    resolver => resolvers.loader
    callback => undefined
*/
resolveRequestArray = (contextInfo, context, array, resolver, callback) => {
    if (array.length === 0) return callback(null, []);
    asyncLib.map(array, (item, callback) => {
        // resolver.loader
        resolver.resolve(contextInfo, context, item.loader, (err, result) => {
            if (err && /^[^/]*$/.test(item.loader) && !/-loader$/.test(item.loader)) {
                return resolver.resolve(contextInfo, context, item.loader + "-loader", err2 => {
                    if (!err2) {
                        err.message = err.message + "\n" +
                            "BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.\n" +
                            `                 You need to specify '${item.loader}-loader' instead of '${item.loader}',\n` +
                            "                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed";
                    }
                    callback(err);
                });
            }
            if (err) return callback(err);

            const optionsOnly = item.options ? {
                options: item.options
            } : undefined;
            return callback(null, Object.assign({}, item, identToLoaderRequest(result), optionsOnly));
        });
    }, callback);
}

　　這裡的array只有一個元素，map方法中調用了resolver的resolve方法，似曾相識，就跟之前那個resolve方法一樣，不過來源是resolvers.loader對象。

　　再回顧一下定義：

compiler.resolvers.normal = ResolverFactory.createResolver(Object.assign({
    fileSystem: compiler.inputFileSystem
}, options.resolve));
compiler.resolvers.context = ResolverFactory.createResolver(Object.assign({
    fileSystem: compiler.inputFileSystem,
    resolveToContext: true
}, options.resolve));
compiler.resolvers.loader = ResolverFactory.createResolver(Object.assign({
    fileSystem: compiler.inputFileSystem
}, options.resolveLoader));

　　可以看出，除去最後面那個options，調用的方法是一模一樣的，而options.resolve與options.resolveLoader在預設情況下如下所示：

{
    "resolve": {
        "unsafeCache": true,
        "modules": ["node_modules"],
        "extensions": [".js", ".json"],
        "mainFiles": ["index"],
        "aliasFields": ["browser"],
        "mainFields": ["browser", "module", "main"],
        "cacheWithContext": false
    },
    "resolveLoader": {
        "unsafeCache": true,
        "mainFields": ["loader", "main"],
        "extensions": [".js", ".json"],
        "mainFiles": ["index"],
        "cacheWithContext": false
    }
}

　　只是少了modules、aliasFileds，其他都是一樣的，這兩個參數並不會影響如前doResolve幾節中所講的流程。

　　也就是說，這個方法相當於回到了第29節，從頭開始跑一遍所有的事件流，最後解析出對應的路徑。

 

　　這裡有一個不一樣的地方，這個babel-loader並不是普通的文件類型，所以在doResolver的事件串流中，會走模塊分支。

　　又臭又長的過程就先暫時跳過了，下節再講，最後返回babel-loader的入口文件路徑如下所示：

[ { loader: 'D:\\workspace\\node_modules\\babel-loader\\lib\\index.js' } ]

　　通過神奇的resolve方法找到了對應loader的入口文件，最後的代碼結果如下：

asyncLib.parallel([
    this.resolveRequestArray.bind(this, contextInfo, this.context, useLoadersPost, this.resolvers.loader),
    this.resolveRequestArray.bind(this, contextInfo, this.context, useLoaders, this.resolvers.loader),
    this.resolveRequestArray.bind(this, contextInfo, this.context, useLoadersPre, this.resolvers.loader)
], (err, results) => {
    if (err) return callback(err);
    loaders = results[0].concat(loaders, results[1], results[2]);
    process.nextTick(() => {
        callback(null, {
            // 'D:\\workspace\\doc'
            context: context,
            // 'D:\\workspace\\node_modules\\babel-loader\\lib\\index.js!D:\\workspace\\doc\\input.js'
            request: loaders.map(loaderToIdent).concat([resource]).join("!"),
            // ...
            dependencies: data.dependencies,
            // 'D:\\workspace\\doc\\input.js'
            userRequest,
            // './input.js'
            rawRequest: request,
            // [ { loader: 'D:\\workspace\\node_modules\\babel-loader\\lib\\index.js' } ]
            loaders,
            // 'D:\\workspace\\doc\\input.js'
            resource,
            // ...
            resourceResolveData,
            parser: this.getParser(settings.parser)
        });
    });
});

　　其中最後的parser一會再說，先講講這個callback。

　　看webpack源碼最大的痛苦就是函數嵌套太深，每一個callback都是噩夢，所以這個callback我也是找了很久很久。

　　這個事件流的入口如下：

this.plugin("factory", () => (result, callback) => {
    let resolver = this.applyPluginsWaterfall0("resolver", null);

    // Ignored
    if (!resolver) return callback();

    resolver(result, (err, data) => { /*...*/ })
})

　　這裡調用了tapable的方法返回了一個函數，然後再次調用該函數。

　　而這個事件流的主心骨就是兩個asyncLib.parallel，根本找不到哪裡返回了東西，直到我看到了事件流的plugin：

this.plugin("resolver", () => (data, callback) => {
    // ...
})

　　沒錯，這裡有兩個箭頭函數，先返回一個函數，下麵的調用才是真正的執行。

　　那就很明顯了，process.nextTick是一個node內置的非同步方法，類似於vue的$nextTick，作用就不多說了。

　　callback對應的就是那個調用時的第二個參數，而最後返回的大對象就是data。

　　簡要看一下回調函數內容：

resolver(result, (err, data) => {
    if (err) return callback(err);

    // Ignored
    if (!data) return callback();

    // direct module
    if (typeof data.source === "function")
        return callback(null, data);

    this.applyPluginsAsyncWaterfall("after-resolve", data, (err, result) => {
        // ...
    });
});

　　對返回的結果做了簡單的判斷，然後觸發了另外一個事件流。

　　

　　下一節完善webpack是如何根據babel-loader搜索到對應的模塊入口文件的。


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

-Advertisement-
Play Games
更多相關文章
  • html中meta標簽及用法理解
    自己一直想成為高級前端開發工程師，而自學。奈何最近感覺自學收效甚微，一度迷茫。 不破不立，打算改變這樣的狀態。 春節後上班第一天，今年打算好好實現自己的前端夢想。 重新整理、總結前端技術。 廢話，就不多說了，開始今天的主題。 Html中meta標簽 一、meta標簽 含義 <meta> 元素 可提供 ...
  • 解決在for迴圈內判斷條件多次執行
    最近遇到的這個問題，就是在for迴圈內if判斷的條件會多次執行。 例如，在返回的30數據中，a條目是第7條則會進行30次判斷，彈出29次查無數據，也就是要點擊29次關閉alert，很是讓人不爽。 有了下列解決辦法（利用flag標誌來進行判斷） var temp = false; //迴圈遍歷 拿到數 ...
  • import(),require()
    import():函數是按需載入,import文件的export function require():是運行時載入 import().then(()=>{}) Promise.all([import(),import()]).then(()=>{}) ...
  • https網頁載入http資源提示載入不安全腳本
    https是當下的網站的主流趨勢，甚至像蘋果這樣的大公司，則完全要求用戶必須使用https地址。 然而對於以前http鏈接來說，我們往往就存在一個相容性問題，因為你不可能一下就全部切換過去，應該在很長一段時間內，https與http將共存。 https與http共存的場景有如： 1. app已經發佈 ...
  • jQuery04
    jQuery內容總結： 1、既然是一個js庫，使用之前就要引入js庫，是一個.js文件，版本是1.8.3； 2、寫一個jQuery頁面載入函數（註意與js頁面載入函數的區別）： $（function（）{ //這裡邊寫方法、事件、屬性等操作； }）； 3、方法，屬性，事件等各種操作具體見jQuery ...
  • 【轉】JQuery插件定義
    一：導言 有些WEB開發者，會引用一個JQuery類庫，然後在網頁上寫一寫("#")，(".")，寫了幾年就對別人說非常熟悉JQuery。我曾經也是這樣的人，直到有一次公司里的技術交流，我才改變了自己對自己的看法。 二：普及JQuery知識 知識1：用JQuery寫插件時，最核心的方法有如下兩個： ...
  • 12個實用的 JavaScript 框架分享給前端開發者
    JavaScript庫是預先編寫的 JavaScript 工具代碼，讓開發者可以更容易開發 JavaScript 應用。這個列表我們列出了2017年1月份功能豐富的JavaScript庫，可以幫助您建立有效和有用的 Web 應用程式。 ...
  • js作用域的相關知識
    眾所周知，在ES6之前，JavaScript是沒有塊級作用域的，如下圖所示： 學過其他語言的同學肯定有點詫異，為什麼會這樣呢？因為js還是不同於其他語言的，在ES5中，只有全局作用域和函數作用域，並沒有塊作用域，當然我們可以實現塊作用域的功能。看下麵代碼: 在這段段代碼中，我們使用立即執行函數（II ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類