.4-浅析webpack源码之convert-argv模块

Posted 2020-10-17 QH-Jimmy

　　上一节看了一眼预编译的总体代码，这一节分析convert-argv模块。

　　这个模块主要是对命令参数的解析，也是yargs框架的核心用处。

　

 

生成默认配置文件名数组

 

module.exports = function(yargs, argv, convertOptions) {
    var options = []; 
    // webapck -d
    // 生成map映射文件，告知模块打包地点
    if(argv.d) { /* ... */ }
    // webpack -p
    // 压缩文件
    if(argv.p) { /* ... */ }
    // 配置文件加载标记
    var configFileLoaded = false;
    // 配置文件加载后的载体
    var configFiles = [];
    // 排序
    var extensions = Object.keys(interpret.extensions).sort(function(a, b) {
        return a === ".js" ? -1 : b === ".js" ? 1 : a.length - b.length;
    });
    // 指定所有默认配置文件名
    var defaultConfigFiles = ["webpack.config", "webpackfile"].map(function(filename) {
        return extensions.map(function(ext) {
            return {
                path: path.resolve(filename + ext),
                ext: ext
            };
        });
    }).reduce(function(a, i) {
        return a.concat(i);
    }, []);
    
    // more code...
}

　　函数内部，首先判断了argv.d与argv.p属性是否存在，这个属性来源于参数d与p，即webpack -d -p，测试如图：

　　

　　

　　因为懒得加，所以直接跳过，进入到第二阶段，生成默认配置文件名数组。

　　这里引入了一个小的模块interpret，调用Object.keys(interpret.extensions)返回一系列文件扩展名的数组，如图：

　　

　　由于获取到的数组为乱序，所以这里首先进行排序，规则为.js放在第一位，后面的按长度从小到大，结果是这样：

　　

　　

　　接下来是两个map与一个reduce的调用，首先两个map会返回一个数组，包含两个对象数组，对象包含path、ext两个属性，path代表路径+文件名+后缀，ext就是后缀，调用map后会得到如下数组 (截取部分)：

　　

　　

　　最后调用reduce方法将二维数组扁平化为一维数组，图就不截了。

　　

定义配置文件路径与后缀

　　

　　有了默认列表，第二步就是尝试获取对应的配置文件：

var i;
// 从命令行读取--config
// argv.config => config.js
if(argv.config) {
    var getConfigExtension = function getConfigExtension(configPath) {
        for(i = extensions.length - 1; i >= 0; i--) {
            var tmpExt = extensions[i];
            if(configPath.indexOf(tmpExt, configPath.length - tmpExt.length) > -1) {
                return tmpExt;
            }
        }
        return path.extname(configPath);
    };

    var mapConfigArg = function mapConfigArg(configArg) {
        // 获取文件绝对路径
        var resolvedPath = path.resolve(configArg);
        // 获取文件后缀
        var extension = getConfigExtension(resolvedPath);
        return {
            path: resolvedPath,
            ext: extension
        };
    };
    // 包装成数组 统一处理单、多配置文件情况
    var configArgList = Array.isArray(argv.config) ? argv.config : [argv.config];
    configFiles = configArgList.map(mapConfigArg);
}
// 如果未指定配置文件 尝试匹配默认文件名
else {
    for(i = 0; i < defaultConfigFiles.length; i++) {
        var webpackConfig = defaultConfigFiles[i].path;
        // 检测路径中是否存在对应文件
        if(fs.existsSync(webpackConfig)) {
            configFiles.push({
                path: webpackConfig,
                ext: defaultConfigFiles[i].ext
            });
            break;
        }
    }
}

　　这里的代码比较简单，如果调用了--config自定义配置文件，该指令后面的会被当成参数传给argv.config。

　　存在argv.config则会对文件名与合法后缀数组进行匹配，检测出配置文件的后缀包装成对象返回。

　　如果不指定配置文件，会进入else代码段开始遍历默认配置文件数组，fs.existsSync检测当前路径是否存在该文件，有就当成配置文件包装返回。

 

获取配置文件输出模块并做简单处理

　　

　　上一步只是代表接确定了配置文件的绝对路径，这个文件并不一定是有效且存在的。

　　这一步会获取到配置文件的输出并简单处理：

if(configFiles.length > 0) {
    var registerCompiler = function registerCompiler(moduleDescriptor) {
        // ...
    };

    var requireConfig = function requireConfig(configPath) {
        // 获取到modules.exports输出的内容
        var options = require(configPath);
        // 二次处理
        options = prepareOptions(options, argv);
        return options;
    };
    // 本例中configFiles => [{path:\'d:\\\\workspace\\\\node_modules\\\\webpack\\\\bin\\\\config.js\',ext:\'.js\'}]
    configFiles.forEach(function(file) {
        // interpret.extensions[.js]为null
        // 这里直接跳出
        registerCompiler(interpret.extensions[file.ext]);
        // 这里的options是convert-argv.js开头声明的数组
        options.push(requireConfig(file.path));
    });
    // 代表配置文件成功加载
    configFileLoaded = true;
}

　　这里的处理情况有两个：

1、根据后缀名二次处理

2、将路径传进一个prepareOptions模块处理

　　这个模块内容十分简单，可以看一下：

"use strict";

module.exports = function prepareOptions(options, argv) {
    argv = argv || {};
    // 判断是否通过export default输出
    options = handleExport(options);
    // 非数组
    if(Array.isArray(options)) {
        options = options.map(_options => handleFunction(_options, argv));
    } else {
        // 当options为函数时
        options = handleFunction(options, argv);
    }
    return options;
};

function handleExport(options) {
    const isES6DefaultExported = (
        typeof options === "object" && options !== null && typeof options.default !== "undefined"
    );
    options = isES6DefaultExported ? options.default : options;
    return options;
}

function handleFunction(options, argv) {
    if(typeof options === "function") {
        options = options(argv.env, argv);
    }
    return options;
}

　　这里针对多配置(数组)与单配置进行了处理，判断了模块输出的方式(ES6、CMD)以及输出的类型(对象、函数)，最后返回处理后的配置对象并标记配置文件已被加载。

 

终极处理函数

　　

　　接下来就是最后一个阶段：

if(!configFileLoaded) {
    return processConfiguredOptions({});
} else if(options.length === 1) {
    return processConfiguredOptions(options[0]);
} else {
    return processConfiguredOptions(options);
}

function processConfiguredOptions(options) {
    // 非法输出类型
    if(options === null || typeof options !== "object") {
        console.error("Config did not export an object or a function returning an object.");
        process.exit(-1); // eslint-disable-line
    }
    // promise检测
    if(typeof options.then === "function") {
        return options.then(processConfiguredOptions);
    }
    // export default检测
    if(typeof options === "object" && typeof options.default === "object") {
        return processConfiguredOptions(options.default);
    }
    // 数组
    if(Array.isArray(options) && argv["config-name"]) { /* ... */ }
    // 数组
    if(Array.isArray(options)) { /* ... */ } 
    else {
        // 单配置
        processOptions(options);
    }

    if(argv.context) {
        options.context = path.resolve(argv.context);
    }
    // 设置默认上下文为进程当前绝对路径
    if(!options.context) {
        options.context = process.cwd();
    }
    // 跳过
    if(argv.watch) { /* ... */ }
    if(argv["watch-aggregate-timeout"]) { /* ... */ }
    if(typeof argv["watch-poll"] !== "undefined") { /* ... */ }
    if(argv["watch-stdin"]) { /* ... */ }
    return options;
}

　　这里根据不同的情况传入空对象、单配置对象、多配置数组。

　　在函数的开头又再次检测了合法性、promise、ES6模块输出方法，由于本例只有一个配置对象，所以直接进processOptions函数，这个函数很长，简化后源码如下：

function processOptions(options) {
    // 是否存在output.filename
    var noOutputFilenameDefined = !options.output || !options.output.filename;

    function ifArg(name, fn, init, finalize) { /* ... */ }
    function ifArgPair(name, fn, init, finalize) { /* ... */ }
    function ifBooleanArg(name, fn) { /* ... */ }
    function mapArgToBoolean(name, optionName) { /* ... */ }
    function loadPlugin(name) { /* ... */ }
    function ensureObject(parent, name) { /* ... */ }
    function ensureArray(parent, name) { /* ... */ }function bindRules(arg) { /* ... */ }var defineObject;

    // 中间穿插大量ifArgPair、ifArg、ifBooleanArg等

    mapArgToBoolean("cache");

    function processResolveAlias(arg, key) { /* ... */ }
    processResolveAlias("resolve-alias", "resolve");
    processResolveAlias("resolve-loader-alias", "resolveLoader");

    mapArgToBoolean("bail");

    mapArgToBoolean("profile");
    // 无输出文件名配置
    if (noOutputFilenameDefined) { /* ... */ }
    // 处理命令参数
    if (argv._.length > 0) { /* ... */ }
    // 无入口文件配置
    if (!options.entry) { /* ... */ }
}

　　首先看一下里面的工具函数，区别了不同参数类型的命令。

　　指令分类如下：

　　ifArg：基本处理函数

　　ifArgpair：命令参数存在键值对形式

　　ifBooleanArg：无参命令

　　mapArgToBoolean：命令参数为布尔类型

　　(这里面的argv[name]均代表一个对应的指令，如：argv["entry"]代表--entry。)

1、ifArgpair、ifArg

function ifArgPair(name, fn, init, finalize) {
    // 直接进入ifArg函数
    // content => argv[name]的数组元素
    // idx => 索引
    ifArg(name, function(content, idx) {
        // 字符"="索引
        var i = content.indexOf("=");
        if (i < 0) {
            // 无等号的字符
            return fn(null, content, idx);
        } else {
            // 传入=号左边与右边的字符
            return fn(content.substr(0, i), content.substr(i + 1), idx);
        }
    }, init, finalize);
}

// init => 构造函数
// finalize => 析构函数
function ifArg(name, fn, init, finalize) {
    if (Array.isArray(argv[name])) {
        if (init) { init(); }
        argv[name].forEach(fn);
        if (finalize) { finalize(); }
    } else if (typeof argv[name] !== "undefined" && argv[name] !== null) {
        if (init) { init(); }
        fn(argv[name], -1);
        if (finalize) { finalize(); }
    }
}

 

2、ifBooleanArg

// 当argv[name]不为false时才执行fn函数
function ifBooleanArg(name, fn) {
    ifArg(name, function(bool) {
        if (bool) { fn(); }
    });
}

 

3、mapArgToBoolean

// 处理布尔值指令
function mapArgToBoolean(name, optionName) {
    ifArg(name, function(bool) {
        if (bool === true)
            options[optionName || name] = true;
        else if (bool === false)
            options[optionName || name] = false;
    });
}

 

4、ensureObject、ensureArray

// 保证指定属性为对象
function ensureObject(parent, name) {
    if (typeof parent[name] !== "object" || parent[name] === null) {
        parent[name] = {};
    }
}
// 保证指定属性为数组
function ensureArray(parent, name) {
    if (!Array.isArray(parent[name])) {
        parent[name] = [];
    }
}

 

5、bindRules

function bindRules(arg) {
    // 指令可以是a=b 也可以是单独的a
    ifArgPair(arg, function(name, binding) {
        // 没有等号的时候
        if(name === null) {
            name = binding;
            binding += "-loader";
        }
        // 生成对应的test正则与loader
        var rule = {
            test: new RegExp("\\\\." + name.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, "\\\\$&") + "$"), // eslint-disable-line no-useless-escape
            loader: binding
        };
        // 生成前置或后置loader
        if(arg === "module-bind-pre") {
            rule.enforce = "pre";
        } else if(arg === "module-bind-post") {
            rule.enforce = "post";
        }
        options.module.rules.push(rule);
    }, function() {
        ensureObject(options, "module");
        ensureArray(options.module, "rules");
    });
}
bindRules("module-bind");
bindRules("module-bind-pre");
bindRules("module-bind-post");

　　后面的bindRules可以看出如果要在命令中引入loader，可以使用module-bind、module-bind-pre、module-bind-post三个参数。

　　该指令参数一般用“=”号连接需要转换的文件类型与对应的loader，测试案例如下：

　　

　　等号两侧的字符串会变成name与binding传入函数中，并自动生成对应的test、loader并push进module.rules中。

　　也可以用没有等号的字符串，此时name默认为该字符串，loader会在后面加一个-loader，测试代码如下：

　　

　　至于其余两个pre、post没啥讲的。

 

6、loadPlugin

function loadPlugin(name) {
    var loadUtils = require("loader-utils");
    var args;
    try {
        var p = name && name.indexOf("?");
        if(p > -1) {
            // 解析参数
            args = loadUtils.parseQuery(name.substring(p));
            name = name.substring(0, p);
        }
    } catch(e) {
        console.log("Invalid plugin arguments " + name + " (" + e + ").");
        process.exit(-1); // eslint-disable-line
    }

    var path;
    try {
        var resolve = require("enhanced-resolve");
        // 尝试获取插件模块的绝对路径
        path = resolve.sync(process.cwd(), name);
    } catch(e) {
        console.log("Cannot resolve plugin " + name + ".");
        process.exit(-1); // eslint-disable-line
    }
    var Plugin;
    try {
        // 加载模块
        Plugin = require(path);
    } catch(e) {
        console.log("Cannot load plugin " + name + ". (" + path + ")");
        throw e;
    }
    try {
        // 返回插件实例
        return new Plugin(args);
    } catch(e) {
        console.log("Cannot instantiate plugin " + name + ". (" + path + ")");
        throw e;
    }
}

　　这里的步骤比较清晰，如下：

1、判断传入参数是否形式类似于pluginname?params，对后面的参数进行解析

2、尝试获取插件的绝对路径

3、尝试加载模块

4、尝试调用new方法并返回模块实例

　　参数解析用到了loadUtils模块的parseQuery方法，这里进去看一下源码：

const specialValues = {
    "null": null,
    "true": true,
    "false": false
};

function parseQuery(query) {
    // 传入的query字符串必须以?开头
    if(query.substr(0, 1) !== "?") {
        throw new Error("A valid query string passed to parseQuery should begin with \'?\'");
    }
    query = query.substr(1);
    // 如果只传一个问号返回空对象
    if(!query) {
        return {};
    }
    // ?{...}的情况
    // 调用JSON5尝试进行对象解析
    // JSON5是对JSON的扩展
    if(query.substr(0, 1) === "{" && query.substr(-1) === "}") {
        return JSON5.parse(query);
    }
    // 其余情况切割,或&符号
    const queryArgs = query.split(/[,&]/g);
    const result = {};
    queryArgs.forEach(arg => {
        const idx = arg.indexOf("=");
        // 类似于处理get请求的参数 例如：?a=1&b=2
        if(idx >= 0) {
            let name = arg.substr(0, idx);
            // decodeURIComponent对URI进行解码
            let value = decodeURIComponent(arg.substr(idx + 1));
            // 将null、true、false字符串转换为值
            if(specialValues.hasOwnProperty(value)) {
                value = specialValues[value];
            }
            // key以[]结尾
            if(name.substr(-2) === "[]") {
                // 截取key并设置值为数组
                name = decodeURIComponent(name.substr(0, name.length - 2));
                if(!Array.isArray(result[name]))
                    result[name] = [];
                result[name].push(value);
            }
            // 正常情况直接在result对象上添加属性
            else {
                name = decodeURIComponent(name);
                result[name] = value;
            }
        } else {
            // ?-a&+b&c => result = {a:false,b:true,c:true}
            if(arg.substr(0, 1) === "-") {
                result[decodeURIComponent(arg.substr(1))] = false;
            } else if(arg.substr(0, 1) === "+") {
                result[decodeURIComponent(arg.substr(1))] = true;
            } else {
                result[decodeURIComponent(arg)] = true;
            }
        }
    });
    return result;
}

　　除去不合理的传参，可以用两种模式进行传参：

1、正常模式：?a&a=1&-a&+b&a[]=1

　　前缀为"-"、"+"会在else被处理，"-"符号开头值会被视为false，无前缀或者为"+"会被视为true。

　　类似于get请求参数会被一样处理，进行字符串切割并依次添加进result对象。

　　最后一种比较特殊，代表参数a是一个数组，学过JAVA或者C++应该会熟悉这种声明方式。

2、JSON模式：?{...}

　　以"{"开头"}"结尾会被进行JSON解析，注意这里不是普通的JSON.parse，而是引入了一个JSON的扩展JSON5，该工具相对于JSON扩展了多项功能，例如：

（1）JSON不允许有注释

（2）JSON中的key必须要用双引号包起来

（3）JSON对象、数组尾部不允许出现多余的逗号

　　等等。

　　详情可见：https://www.npmjs.com/package/json5

　　测试代码如下：

普通模式：　

JSON模式：

 

7、processResolveAlias

function processResolveAlias(arg, key) {
    ifArgPair(arg, function(name, value) {
        // 必须以a=1这种键值对形式进行传参
        if(!name) {
            throw new Error("--" + arg + " <string>=<string>");
        }
        /** 
         * resolve:{
         *     alias:{
         *      
         *     }  
         * }
         */
        ensureObject(options, key);
        ensureObject(options[key], "alias");
        options[key].alias[name] = value;
    });
}
processResolveAlias("resolve-alias", "resolve");
processResolveAlias("resolve-loader-alias", "resolveLoader");

　　这里处理--resolve-alias指令与resolve-loader-alias指令，该指令参数必须严格按照a=b形式。

　　测试代码如下：

　　

 

　　因为配置文件只有entry和output，所以属性都是undefined或false，都会跳过。

　　这里简单看几个常用的：

// 热重载
ifBooleanArg("hot", function() {
    ensureArray(options, "plugins");
    var HotModuleReplacementPlugin = require("../lib/HotModuleReplacementPlugin");
    options.plugins.push(new HotModuleReplacementPlugin());
});
// loaderOptionsPlugin插件
ifBooleanArg("debug", function() {
    ensureArray(options, "plugins");
    var LoaderOptionsPlugin = require("../lib/LoaderOptionsPlugin");
    options.plugins.push(new LoaderOptionsPlugin({
        debug: true
    }));
});
// 代码压缩插件
ifBooleanArg("optimize-minimize", function() {
    ensureArray(options, "plugins");
    var UglifyJsPlugin = require("../lib/optimize/UglifyJsPlugin");
    var LoaderOptionsPlugin = require("../lib/LoaderOptionsPlugin");
    options.plugins.push(new UglifyJsPlugin({
        // devtool参数
        sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
    }));
    options.plugins.push(new LoaderOptionsPlugin({
        minimize: true
    }));
});

　　可以看到，使用--hot、--debug、--optimize-minimize指令会分别加载3个插件，一个是处理loader中Options属性的LoaderOptionsPlugin插件，一个是代码压缩插件UglifyJsPlugin，还有一个就是热重载插件，3个插件后面的章节有空再讲。所有属性在之前的config-yargs中被配置，但是默认值为false，而ifBooleanArg在传入值为false时不会执行回调，所以这里并不是加载任何东西。

　　其他还有很多指令类似于--output-path可以设置output.path参数等等，有兴趣的可以自己去源码看。 

 

　　最后剩下3个代码块：

    // 无输出文件名配置
    if (noOutputFilenameDefined) { /* ... */ }
    // 处理命令参数
    if (argv._.length > 0) { /* ... */ }
    // 无入口文件配置
    if (!options.entry) { /* ... */ }

　　由于指令没有传任何额外参数，所以argv._是一个空数组，中间的可以跳过。

　　所以只需要看其余两个，首先看简单的无入口文件配置的情况，即配置文件没有entry属性：

if (!options.entry) {
    // 存在配置文件 但是没有入口函数
    if (configFileLoaded) {
        console.error("Configuration file found but no entry configured.");
    }
    // 未找到配置文件 
    else {
        console.error("No configuration file found and no entry configured via CLI option.");
        console.error("When using the CLI you need to provide at least two arguments: entry and output.");
        console.error("A configuration file could be named \'webpack.config.js\' in the current directory.");
    }
    console.error("Use --help to display the CLI options.");
    // 退出进程
    process.exit(-1); // eslint-disable-line
}

　　可以看出这是必传参数，根据是否找到对应的配置文件报不同的错误。

　　另一种情况是不存在ouput或output.filename属性：

if (noOutputFilenameDefined) {
    ensureObject(options, "output");
    // convertOptions来源于第三个参数
    // module.exports = function(yargs, argv, convertOptions) {...}
    // var options = require("./convert-argv")(yargs, argv)
    // 只传了两个参数 所以跳过
    if (convertOptions && convertOptions.outputFilename) {
        options.output.path = path.resolve(path.dirname(convertOptions.outputFilename));
        options.output.filename = path.basename(convertOptions.outputFilename);
    } 
    // 尝试从命令参数获取output.filename
    // 命令的最后一个参数会被当成入口文件名
    else if (argv._.length > 0) {
        options.output.filename = argv._.pop();
        options.output.path = path.resolve(path.dirname(options.output.filename));
        options.output.filename = path.basename(options.output.filename);
    }
    // 老套的报错 不解释 
    else if (configFileLoaded) {
        throw new Error("\'output.filename\' is required, either in config file or as --output-filename");
    } else {
        console.error("No configuration file found and no output filename configured via CLI option.");
        console.error("A configuration file could be named \'webpack.config.js\' in the current directory.");
        console.error("Use --help to display the CLI options.");
        process.exit(-1); // eslint-disable-line
    }
}

　　可以看出，output.filename也是必须的，但是不一定需要在配置文件中，有两个方式可以传入。

　　一个是作为convert-argv.js的第三个参数传入，由于在之前解析时默认只传了两个，这里会跳过，暂时不清楚传入地点。

　　另外一个是在命令中传入，测试代码：

　　

　　

 

　　至此，模块全部解析完毕，输出options如图所示：

　　

 

　　真是累……