.27-淺析webpack源碼之事件流make(2)

　　上一節跑到了NormalModuleFactory模塊，調用了原型方法create後，依次觸發了before-rsolve、factory、resolver事件流，這節從resolver事件流開始講。

　　源碼簡化如下：

this.plugin("resolver", () => (data, callback) => {
    // 來自於create方法
    const contextInfo = data.contextInfo;
    const context = data.context;
    const request = data.request;
    // 檢測前尾碼
    // 正則比較簡單就不解釋了
    const noAutoLoaders = /^-?!/.test(request);
    const noPrePostAutoLoaders = /^!!/.test(request);
    const noPostAutoLoaders = /^-!/.test(request);
    let elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!");
    // 傳路徑的話這裡會是['./input.js']
    let resource = elements.pop();
    // 這裡是空數組
    elements = elements.map(identToLoaderRequest);

    asyncLib.parallel([ /**/ ], (err, results) => { /**/ });
});

　　第一次進來這個函數傳入的是entry，在這裡對字元串進行正則校驗與切割，一般情況下只會傳入口文件路徑，官網文檔示例也是正常的形式，所以這裡暫時無視。

　　這裡看一下identToLoaderRequest的源碼：

// 根據問號切割值與參數
/* 
value?opt => 
{
    loader: value,
    options: opt
}
*/
function identToLoaderRequest(resultString) {
    const idx = resultString.indexOf("?");
    let options;
    if (idx >= 0) {
        options = resultString.substr(idx + 1);
        resultString = resultString.substr(0, idx);
        return {
            loader: resultString,
            options
        };
    } else {
        return {
            loader: resultString
        };
    }
}

　　非常普通的一個參數切割函數。

async.parallel

　　接下來的調用引入了nodejs的async模塊裡面的parallel方法，該方法官網解釋如下：

/*
    Run the tasks collection of functions in parallel, 
    without waiting until the previous function has completed. 
    If any of the functions pass an error to its callback, 
    the main callback is immediately called with the value of the error. 
    Once the tasks have completed, the results are passed to the final callback as an array.
*/
asyncLib.parallel([ /*fn1,fn2...*/ ], (err, results) => { /**/ });

　　簡單來說就是並行調用數組中的方法，將所有方法返回值包裝成一個數組(results)傳給回調函數，任何一個方法出錯會立即執行回調函數並將錯誤信息作為參數(err)傳入。

　　這裡簡要的介紹一下parallel方法源碼的核心實現：

/*
    https://github.com/caolan/async/blob/master/lib/eachOf.js
*/
/* 
    coll => 方法數組
    iteratee => 迭代器
    callback => 回調函數
*/
function eachOfArrayLike(coll, iteratee, callback) {
    // 將回調函數包裝成只執行一次
    // 具體實現可參考jquery源碼的一次性事件綁定
    callback = once(callback || noop);
    var index = 0, // 數組索引
        completed = 0, // 已完成函數數量
        length = coll.length;
    if (length === 0) {
        callback(null);
    }

    function iteratorCallback(err, value) {
        // 當其中一個函數執行出錯立即執行callback
        if (err) {
            callback(err);
        }
        // breakLoop為空 無視
        // 當所有函數都執行完後調用callback
        else if ((++completed === length) || value === breakLoop) {
            callback(null);
        }
    }
    // 遍歷方法數組
    for (; index < length; index++) {
        iteratee(coll[index], index, onlyOnce(iteratorCallback));
    }
}

　　可以看出，callback永遠只執行一次，僅當中途執行報錯或所有函數都執行完畢。

　　如果某一個函數正常執行，則必須調用callback(null,args)，其中args就是當前函數的返回值，該值會作為最終回調函數的數組參數之一。

　　依次直接看數組中的方法：

asyncLib.parallel([
    // 1
    callback => this.resolveRequestArray(contextInfo, context, elements, this.resolvers.loader, callback),
    // 2
    callback => { /**/ }
], /*callback*/ )

　　第一個是調用的原型方法，傳入了一溜參數，源碼如下：

class NormalModuleFactory extends Tapable {
    /* 
        contextInfo => { issuer: '', compiler:undefined }
        context => process.cwd()
        array => []
        resolver => 來源於WebpackOptionsApply模塊中最後compiler.resolvers的設置
        callback => 並行執行完成後的回調函數
    */
    resolveRequestArray(contextInfo, context, array, resolver, callback) {
        // 由於array當前為空數組 所以直接返回
        if (array.length === 0) return callback(null, []);
        asyncLib.map(array, (item, callback) => { /**/ }, callback);
    }
}

　　這裡會直接返回，返回值為空數組。

　　接下來看第二個方法：

callback => {
    // resource => './input.js'
    if (resource === "" || resource[0] === "?")
        return callback(null, {
            resource
        });
    this.resolvers.normal.resolve(contextInfo, context, resource, (err, resource, resourceResolveData) => {
        if (err) return callback(err);
        callback(null, {
            resourceResolveData,
            resource
        });
    });
}

　　跳過第一個if判斷，繼而調用了resolver.normal的resolve方法，傳入了3個參數以及一個回調函數。

　　下一節分析resolver三個方法的具體實現。