.34-浅析webpack源码之事件流make(3)
新年好呀~过个年光打游戏,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搜索到对应的模块入口文件的。
上一篇: 大哥,你弟弟工作服掉了