webpack命令-从零开始webpack源码思考1

1、下载需要分析的项目

分别是核心、cli、本地开发服务器

2、看webpack-4.43.0

package.json

"main": "lib/webpack.js",
  "web": "lib/webpack.web.js",
  "bin": "./bin/webpack.js",

 

命令行调用，执行bin对应js文件；nodejs代码调用执行main对应文件。

3、./bin/webpack.js

#!/usr/bin/env node

// @ts-ignore
process.exitCode = 0;

/**
 * @param {string} command process to run
 * @param {string[]} args commandline arguments
 * @returns {Promise<void>} promise
 */
const runCommand = (command, args) => {
	const cp = require("child_process");
	return new Promise((resolve, reject) => {
		const executedCommand = cp.spawn(command, args, {
			stdio: "inherit",
			shell: true
		});

		executedCommand.on("error", error => {
			reject(error);
		});

		executedCommand.on("exit", code => {
			if (code === 0) {
				resolve();
			} else {
				reject();
			}
		});
	});
};

process.exitCode，设置退出状态，0成功，1错误。

runCommand，使用child_process开启子进程，执行命令，返回promise。inherit：继承父进程相关的stdio。

 

/**
 * @param {string} packageName name of the package
 * @returns {boolean} is the package installed?
 */
const isInstalled = packageName => {
	try {
		require.resolve(packageName);

		return true;
	} catch (err) {
		return false;
	}
};

require.resolve执行成功，说明包存在，出现错误，则捕获说明不存在。

 

/**
 * @typedef {Object} CliOption
 * @property {string} name display name
 * @property {string} package npm package name
 * @property {string} binName name of the executable file
 * @property {string} alias shortcut for choice
 * @property {boolean} installed currently installed?
 * @property {boolean} recommended is recommended
 * @property {string} url homepage
 * @property {string} description description
 */

/** @type {CliOption[]} */
const CLIs = [
	{
		name: "webpack-cli",
		package: "webpack-cli",
		binName: "webpack-cli",
		alias: "cli",
		installed: isInstalled("webpack-cli"),
		recommended: true,
		url: "https://github.com/webpack/webpack-cli",
		description: "The original webpack full-featured CLI."
	},
	{
		name: "webpack-command",
		package: "webpack-command",
		binName: "webpack-command",
		alias: "command",
		installed: isInstalled("webpack-command"),
		recommended: false,
		url: "https://github.com/webpack-contrib/webpack-command",
		description: "A lightweight, opinionated webpack CLI."
	}
];

两个包的信息，webpack-cli和webpack-command，下面会用到。

const installedClis = CLIs.filter(cli => cli.installed);

过滤这两包，获取安装过的包组成的数组。

if (installedClis.length === 0) {
	const path = require("path");
	const fs = require("fs");
	const readLine = require("readline");

	let notify =
		"One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:";

	for (const item of CLIs) {
		if (item.recommended) {
			notify += `\n - ${item.name} (${item.url})\n   ${item.description}`;
		}
	}

	console.error(notify);

	const isYarn = fs.existsSync(path.resolve(process.cwd(), "yarn.lock"));

	const packageManager = isYarn ? "yarn" : "npm";
	const installOptions = [isYarn ? "add" : "install", "-D"];

	console.error(
		`We will use "${packageManager}" to install the CLI via "${packageManager} ${installOptions.join(
			" "
		)}".`
	);

	const question = `Do you want to install 'webpack-cli' (yes/no): `;

	const questionInterface = readLine.createInterface({
		input: process.stdin,
		output: process.stderr
	});
	questionInterface.question(question, answer => {
		questionInterface.close();

		const normalizedAnswer = answer.toLowerCase().startsWith("y");

		if (!normalizedAnswer) {
			console.error(
				"You need to install 'webpack-cli' to use webpack via CLI.\n" +
					"You can also install the CLI manually."
			);
			process.exitCode = 1;

			return;
		}

		const packageName = "webpack-cli";

		console.log(
			`Installing '${packageName}' (running '${packageManager} ${installOptions.join(
				" "
			)} ${packageName}')...`
		);

		runCommand(packageManager, installOptions.concat(packageName))
			.then(() => {
				require(packageName); //eslint-disable-line
			})
			.catch(error => {
				console.error(error);
				process.exitCode = 1;
			});
	});
} 

如果两个包，一个也没安装，就提示必须安装，这是推荐的包。

使用 fs.existsSync，在当前工作目录，判断是否存在yarn.lock文件。

存在，设置yarn add;否则npm install -D 。

提示询问是否同意安装webpack-cli？ yes/no

使用readLine.createInterface，监控用户输入。

questionInterface.question监控到输入，就关闭监控输入，转小写判断输入是否y开头，不是，就提示你得安装，你可以人工手动安装。

并设置错误process.exitCode = 1;返回。

如果输入的开头是y，就提示安装webpack-cli，并且执行安装命令，注意runCommand参数，第二个参数是数组，表示命令行命令的参数，child_process子进程的.spawn函数，也支持这个数组形式参数。

前面runCommand返回promise,子进程执行退出时，如果code为0，表示成功执行命令，也就是成功安装，执行resolve。

然后就到了then，为了确保成功安装了webpack-cli，就require(packageName)下试下。 如果异常，也是catch，提示错误，设置process.exitCode = 1。 子进程如果失败，非0，会走reject();这时也会到catch逻辑。 promise的错误传递体现了。

else if (installedClis.length === 1) {
	const path = require("path");
	const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
	// eslint-disable-next-line node/no-missing-require
	const pkg = require(pkgPath);
	// eslint-disable-next-line node/no-missing-require
	require(path.resolve(
		path.dirname(pkgPath),
		pkg.bin[installedClis[0].binName]
	));
} 

俩个如果有一个安装了，我们这时并不知道安装了哪儿个，不过无所谓，我们就取这个安装过的包的package.json文件路径，然后引用它。

path.dirname(pkgPath)，找到文件路径的目录路径。

找到package.json内bin对象，进而根据安装过的cli的binName，找到对应bin对应的js路径。

然后引用它。

这里引用它，其实就是执行它，相当于执行命令行命令。

 

 else {
	console.warn(
		`You have installed ${installedClis
			.map(item => item.name)
			.join(
				" and "
			)} together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary.`
	);

	// @ts-ignore
	process.exitCode = 1;
}

如果两个都安装了，提示只需要一个，卸载一个吧，设置退出码=1。