细说webpack源码之compile流程-rules参数处理技巧(1)


Posted in Javascript onDecember 26, 2017

上篇文章给大家介绍了细说webpack源码之compile流程-rules参数处理技巧(2), 细说webpack源码之compile流程-入口函数run

大家可以点击查看。

Tips:写到这里,需要对当初的规则进行修改。在必要的地方,会在webpack.config.js中设置特殊的参数来跑源码,例如本例会使用module:{rules:[...]}来测试,基本上测试参数均取自于vue脚手架(太复杂的删掉)。

下面两节的主要流程图如下:

细说webpack源码之compile流程-rules参数处理技巧(1)

在进入compile方法后,迎面而来的就是这么一行代码:

const params = this.newCompilationParams();

简单看一下方法,源码如下:

Compiler.prototype.newCompilationParams = () => {
 const params = {
 normalModuleFactory: this.createNormalModuleFactory(),
 contextModuleFactory: this.createContextModuleFactory(),
 compilationDependencies: []
 };
 return params;
}
// 工厂方法1
Compiler.prototype.createNormalModuleFactory = () => {
 const normalModuleFactory = new NormalModuleFactory(this.options.context, this.resolvers, this.options.module || {});
 this.applyPlugins("normal-module-factory", normalModuleFactory);
 return normalModuleFactory;
}
// 工厂方法2
Compiler.prototype.createContextModuleFactory = () => {
 const contextModuleFactory = new ContextModuleFactory(this.resolvers, this.inputFileSystem);
 this.applyPlugins("context-module-factory", contextModuleFactory);
 return contextModuleFactory;
}

该方法生成了一个对象参数,而对象中的值又分别调用了各自的工厂方法。

按顺序,首先来看NormalModuleFactory工厂方法,首先是构造函数:

class NormalModuleFactory extends Tapable {
 // context默认为命令执行路径
 // resolvers => {...}
 // options => options.module
 constructor(context, resolvers, options) {
 super();
 // 该参数在WebpackOptionsApply方法中被赋值
 this.resolvers = resolvers;
 // 处理module.rules或module.loaders
 // 两者意义一样
 this.ruleSet = new RuleSet(options.rules || options.loaders);
 // 谁会去设置这玩意???默认参数设置那会被置为true
 // 这里会生成一个返回布尔值的函数 可以简单理解为!!
 this.cachePredicate = typeof options.unsafeCache === "function" ? options.unsafeCache : Boolean.bind(null, options.unsafeCache);
 this.context = context || "";
 // 解析缓存
 this.parserCache = {};
 // 这两个方法超级长
 this.plugin("factory", () => (result, callback) => { /**/ });
 this.plugin("resolver", () => (data, callback) => { /**/ })
 }
}

也是一个继承了Tapable框架的类,构造函数除去两个事件流注入不看,剩余的内容只有RuleSet那一块,也是本节的主要内容。

从参数可以看出,这里是对module.rules处理的地方,本节中测试配置添加了rules方便测试:

const path = require('path');
// resolve => path.join(__dirname,'..',path)
module.exports = {
 entry: './input.js',
 output: {
 filename: 'output.js'
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 loader: 'babel-loader',
 include: [resolve('src'), resolve('test')]
 },
 {
 test: /\.css/,
 loader: 'css-loader!style-loader'
 }
 ]
 }
};

只针对配置中有或者常用且官网有解释的参数进行。

RuleSet

构造函数如下:

module.exports = class RuleSet {
 constructor(rules) {
 // 空对象
 this.references = Object.create(null);
 // 格式化
 this.rules = RuleSet.normalizeRules(rules, this.references, "ref-");
 }
}

生成了一个纯净对象并调用了本地静态方法进行格式化:

class RuleSet {
 constructor(rules) { /**/ }
 // rules => 传进来的配置数组
 // refs => 纯净对象
 // ident => 'ref-'
 static normalizeRules(rules, refs, ident) {
 // 分数组与非数组
 if (Array.isArray(rules)) {
 return rules.map((rule, idx) => {
 return RuleSet.normalizeRule(rule, refs, `${ident}-${idx}`);
 });
 } else if (rules) {
 return [RuleSet.normalizeRule(rules, refs, ident)];
 }
 // 未配置rules直接返回空数组 
 else {
 return [];
 }
 }
}

这里也区分了数组参数与非数组参数,但是有个小bug。

看代码可以很容易猜到,数组与非数组的情况理论上是这样的:

// 数组
module.exports = {
 // ...
 module: {
 rules: [{ test: /\.vue$/, loader: 'vue-loader' }, /*...*/ ]
 }
};
// 非数组
module.exports = {
 // ...
 module: {
 rules: { test: /\.vue$/, loader: 'vue-loader' }
 }
};

因为传非数组,会被包装成一个数组,所以这种情况属于单loader配置。

但是,这样配置是会报错的,因为过不了validateSchema的验证,测试结果如图:

细说webpack源码之compile流程-rules参数处理技巧(1)

细说webpack源码之compile流程-rules参数处理技巧(1)

这就很尴尬了,提供了非数组形式的处理方式,但是又不通过非数组的校验,所以这基本上是永远不会被执行的代码。

管他的,估计源码太大,开发者已经顾不上了。

下面正式进行格式化阶段,源码整理如下:

class RuleSet {
 constructor(rules) { /**/ };
 // ident => 'ref-${index}'
 static normalizeRule(rule, refs, ident) {
 // 传入字符串
 // 'css-loader' => use:[{loader:'css-loader'}]
 if (typeof rule === "string")
 return {
 use: [{
  loader: rule
 }]
 };
 // 非法参数
 if (!rule)
 throw new Error("Unexcepted null when object was expected as rule");
 if (typeof rule !== "object")
 throw new Error("Unexcepted " + typeof rule + " when object was expected as rule (" + rule + ")");
 const newRule = {};
 let useSource;
 let resourceSource;
 let condition;
 // test
 if (rule.test || rule.include || rule.exclude) { /**/ }
 if (rule.resource) { /**/ }
 // 官网doc都懒得解释 估计是几个很弱智的参数
 if (rule.resourceQuery) { /**/ }
 if (rule.compiler) { /**/ }
 if (rule.issuer) { /**/ }
 // loader、loaders只能用一个
 if (rule.loader && rule.loaders)
 throw new Error(RuleSet.buildErrorMessage(rule, new Error("Provided loader and loaders for rule (use only one of them)")));
 const loader = rule.loaders || rule.loader;
 // 处理loader
 if (typeof loader === "string" && !rule.options && !rule.query) {
 checkUseSource("loader");
 newRule.use = RuleSet.normalizeUse(loader.split("!"), ident);
 }
 else if (typeof loader === "string" && (rule.options || rule.query)) {
 checkUseSource("loader + options/query");
 newRule.use = RuleSet.normalizeUse({
 loader: loader,
 options: rule.options,
 query: rule.query
 }, ident);
 } else if (loader && (rule.options || rule.query)) {
 throw new Error(RuleSet.buildErrorMessage(rule, new Error("options/query cannot be used with loaders (use options for each array item)")));
 } else if (loader) {
 checkUseSource("loaders");
 newRule.use = RuleSet.normalizeUse(loader, ident);
 } else if (rule.options || rule.query) {
 throw new Error(RuleSet.buildErrorMessage(rule, new Error("options/query provided without loader (use loader + options)")));
 }
 // 处理use
 if (rule.use) {
 checkUseSource("use");
 newRule.use = RuleSet.normalizeUse(rule.use, ident);
 }
 // 递归处理内部rules
 if (rule.rules)
 newRule.rules = RuleSet.normalizeRules(rule.rules, refs, `${ident}-rules`);
 // 不知道是啥
 if (rule.oneOf)
 newRule.oneOf = RuleSet.normalizeRules(rule.oneOf, refs, `${ident}-oneOf`);
 //
 const keys = Object.keys(rule).filter((key) => {
 return ["resource", "resourceQuery", "compiler", "test", "include", "exclude", "issuer", "loader", "options", "query", "loaders", "use", "rules", "oneOf"].indexOf(key) < 0;
 });
 keys.forEach((key) => {
 newRule[key] = rule[key];
 });
 function checkUseSource(newSource) { /**/ }
 function checkResourceSource(newSource) { /**/ }
 if (Array.isArray(newRule.use)) {
 newRule.use.forEach((item) => {
 if (item.ident) {
  refs[item.ident] = item.options;
 }
 });
 }
 return newRule;
 }
}

总体来看源码内容如下:

1、生成newRules对象保存转换后的rules

2、处理单字符串rule

3、处理test、include、exclude参数

4、处理resource、resourseQuery、compiler、issuer参数

5、处理loader、loaders、options、query参数

6、处理use参数

7、递归处理rules参数

8、处理oneOf参数

总结

以上所述是小编给大家介绍的细说webpack源码之compile流程-rules参数处理技巧(1),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
一个加载js文件的小脚本
Jun 28 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
javascript的BOM汇总
Jul 16 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
js仿360开机效果
Dec 26 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 #Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 #Javascript
Vue 进入/离开动画效果
Dec 26 #Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 #Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 #Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 #Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 #Javascript
You might like
php对大文件进行读取操作的实现代码
2013/01/23 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python实现网站表单提交和模板
2019/01/15 Python
利用python开发app实战的方法
2019/07/09 Python
Python操作qml对象过程详解
2019/09/26 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
爱情保证书范文
2014/02/01 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
教学副校长工作总结
2015/08/13 职场文书
小学主题班会教案
2015/08/17 职场文书
2016年教师新年寄语
2015/08/18 职场文书