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

if (rule.test || rule.include || rule.exclude) {
 // 标记使用参数
 checkresourcesource("test + include + exclude");
 // 没有就是undefined
 condition = {
 test: rule.test,
 include: rule.include,
 exclude: rule.exclude
 };
 // 处理常规参数
 try {
 newrule.resource = ruleset.normalizecondition(condition);
 } catch (error) {
 throw new error(ruleset.builderrormessage(condition, error));
 }
}

let resourcesource;
// ...
function checkresourcesource(newsource) {
 // 第一次直接跳到后面赋值
 if (resourcesource && resourcesource !== newsource)
 throw new error(ruleset.builderrormessage(rule, new error("rule can only have one resource source (provided " + newsource + " and " + resourcesource + ")")));
 resourcesource = newsource;
}

class ruleset {
 constructor(rules) { /**/ };
 static normalizecondition(condition) {
 // 假值报错
 if (!condition) throw new error("expected condition but got falsy value");
 // 检测给定字符串是否以这个开头
 if (typeof condition === "string") { return str => str.indexof(condition) === 0; }
 // 函数直接返回
 if (typeof condition === "function") { return condition; }
 // 正则表达式返回一个正则的test函数
 if (condition instanceof regexp) { return condition.test.bind(condition); }
 // 数组map递归处理 有一个满足返回true
 if (array.isarray(condition)) {
  const items = condition.map(c => ruleset.normalizecondition(c));
  return ormatcher(items);
 }
 if (typeof condition !== "object") throw error("unexcepted " + typeof condition + " when condition was expected (" + condition + ")");
 const matchers = [];
 // 对象会对每个值进行函数包装弹入matchers中
 object.keys(condition).foreach(key => {
  const value = condition[key];
  switch (key) {
  case "or":
  case "include":
  case "test":
   if (value)
   matchers.push(ruleset.normalizecondition(value));
   break;
  case "and":
   if (value) {
   const items = value.map(c => ruleset.normalizecondition(c));
   matchers.push(andmatcher(items));
   }
   break;
  case "not":
  case "exclude":
   if (value) {
   const matcher = ruleset.normalizecondition(value);
   matchers.push(notmatcher(matcher));
   }
   break;
  default:
   throw new error("unexcepted property " + key + " in condition");
  }
 });
 if (matchers.length === 0)
  throw new error("excepted condition but got " + condition);
 if (matchers.length === 1)
  return matchers[0];
 return andmatcher(matchers);
 }
}

class ruleset {
 constructor(rules) { /**/ };
 /*
 example:
 {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test')]
 }
 */
 /*
 condition:
 {
  test: /\.js$/,
  include: ['d:\\workspace\\src', 'd:\\workspace\\test'],
  exclude: undefined
 }
 */
 static normalizecondition(condition) {
 // include返回类似于 [(str) => str.indexof('d:\\workspace\\src') === 0,...] 的函数
 if (typeof condition === "string") { return str => str.indexof(condition) === 0; }
 // test参数返回了 /\.js$/.test 函数
 if (condition instanceof regexp) { return condition.test.bind(condition); }
 // include为数组
 if (array.isarray(condition)) {
  const items = condition.map(c => ruleset.normalizecondition(c));
  return ormatcher(items);
 }
 const matchers = [];
 // 解析出['test','include','exclude']
 object.keys(condition).foreach(key => {
  const value = condition[key];
  switch (key) {
  // 此value为一个数组
  case "include":
  case "test":
   if (value)
   matchers.push(ruleset.normalizecondition(value));
   break;
  // undefined跳过
  case "exclude":
   if (value) { /**/ }
   break;
  default:
   throw new error("unexcepted property " + key + " in condition");
  }
 });
 return andmatcher(matchers);
 }
}

function ormatcher(items) {
 // 当一个函数被满足条件时返回true
 return function(str) {
 for (let i = 0; i < items.length; i++) {
  if (items[i](str))
  return true;
 }
 return false;
 };
}

function andmatcher(items) {
 // 当一个条件不满足时返回false
 return function(str) {
 for (let i = 0; i < items.length; i++) {
  if (!items[i](str))
  return false;
 }
 return true;
 };
}

if (rule.resource) {
 // 如果前面检测到了test || include || exclude参数 这里会报错
 checkresourcesource("resource");
 try {
 newrule.resource = ruleset.normalizecondition(rule.resource);
 } catch (error) {
 throw new error(ruleset.builderrormessage(rule.resource, error));
 }
}

/*
方式1:
 rules:[
 {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test')]
 }
 ]
*/
/*
方式2:
 rules:[
 {
  resource:{
  test: /\.js$/,
  include: [resolve('src'), resolve('test')]
  exclude: undefined
  }
 }
 ]
*/

const loader = rule.loaders || rule.loader;
// 单loader情况
if (typeof loader === "string" && !rule.options && !rule.query) {
 checkusesource("loader");
 newrule.use = ruleset.normalizeuse(loader.split("!"), ident);
}
// loader配合options或query出现
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);
}
// options与query同时出现报错
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)")));
}
/*
 处理这种愚蠢用法时：
 {
 test: /\.css$/,
 loader: [{ loader: 'less-loader' }, { loader: 'css-loader' }]
 }
*/
else if (loader) {
 checkusesource("loaders");
 newrule.use = ruleset.normalizeuse(loader, ident);
}
// 单独出现options或者query报错
else if (rule.options || rule.query) {
 throw new error(ruleset.builderrormessage(rule, new error("options/query provided without loader (use loader + options)")));
}

static normalizeuse(use, ident) {
 // 单loader字符串
 if (array.isarray(use)) {
 return use
  // 如果是单loader情况这里会返回[[loader1...],[loader2...]]
  .map((item, idx) => ruleset.normalizeuse(item, `${ident}-${idx}`))
  // 扁平化后变成[loader1,loader2]
  .reduce((arr, items) => arr.concat(items), []);
 }
 // 对象或字符串
 return [ruleset.normalizeuseitem(use, ident)];
};

// indet => 'ref-'
static normalizeuseitem(item, ident) {
 if (typeof item === "function")
 return item;
 if (typeof item === "string") {
 return ruleset.normalizeuseitemstring(item);
 }
 const newitem = {};
 if (item.options && item.query) throw new error("provided options and query in use");
 if (!item.loader) throw new error("no loader specified");
 newitem.options = item.options || item.query;
 // 防止options:null的情况
 if (typeof newitem.options === "object" && newitem.options) {
 // 这里只是为了处理ident参数
 if (newitem.options.ident)
  newitem.ident = newitem.options.ident;
 else
  newitem.ident = ident;
 }
 // 取出loader参数
 const keys = object.keys(item).filter(function(key) {
 return ["options", "query"].indexof(key) < 0;
 });
 keys.foreach(function(key) {
 newitem[key] = item[key];
 });
 /*
 newitem = 
 {
 loader:'原字符串',
 ident:'ref-', (或自定义)
 options:{...}
 }
 */
 return newitem;
}

/*
example:
{
 test: /\.css$/,
 loader: 'css-loader?{opt:1}!style-loader'
}

[{loader:'css-loader',options:{opt:1}},
{loader:'style-loader'}]
*/
static normalizeuseitemstring(useitemstring) {
 // 根据'?'切割获取loader的参数
 const idx = useitemstring.indexof("?");
 if (idx >= 0) {
 return {
  loader: useitemstring.substr(0, idx),
  // 后面的作为options返回
  options: useitemstring.substr(idx + 1)
 };
 }
 return {
 loader: useitemstring
 };
}

if (rule.use) {
 checkusesource("use");
 newrule.use = ruleset.normalizeuse(rule.use, ident);
}

/*
 {
 test:/\.css$/,
 user:['css-loader','style-loader]
 }
*/

/*
 {
 test:/\.css$/,
 user:{
  loader:'css-loader',
  options:'1'
 }
 }
*/

rules、oneof
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];
});

// 防止rules:[]的情况
if (array.isarray(newrule.use)) {
 newrule.use.foreach((item) => {
 // ident来源于options/query的ident参数
 if (item.ident) {
  refs[item.ident] = item.options;
 }
 });
}