.34-浅析webpack源码之事件流make(3)

2018-06-24 01:32:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  新年好呀~过个年光打游戏,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搜索到对应的模块入口文件的。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:推荐几本对于学习WebGL有帮助的书籍

下一篇:angularjs 指令详解