[Vue CLI 3] vue inspect 的源码设计实现

首先，请记住：

它在新版本的脚手架项目里面非常重要

它有什么用呢？

inspect internal webpack config

能快速地在控制台看到对应生成的 webpack 配置对象。

首先它是 vue 的一个扩展命令，在文件 @vue/cli/bin/vue.js 中定义了 command

还是依赖了工具包 commander

const program = require(\'commander\')

代码配置如下：

program
  .command(\'inspect [paths...]\')
  .de ion(\'inspect the webpack config in a project with vue-cli-service\')
  .option(\'--mode <mode>\')
  .option(\'--rule <ruleName>\', \'inspect a specific module rule\')
  .option(\'--plugin <pluginName>\', \'inspect a specific plugin\')
  .option(\'--rules\', \'list all module rule names\')
  .option(\'--plugins\', \'list all plugin names\')
  .option(\'-v --verbose\', \'Show full function definitions in output\')
  .action((paths, cmd) => {
    require(\'../lib/inspect\')(paths, cleanArgs(cmd))
  })

这里的 option 比较多：

• mode
• rule
• plugin
• rules
• plugins
• verbose

在前面的文章中，我们比较常用的有 rule 相关的

再接着看一下 lib/inspect.js 文件：接受 2 个参数：

• paths
• args

module.exports = function inspect (paths, args) {
}

核心还是找到 @vue/cli-service，先获取当前执行命令的目录：

const cwd = process.cwd()

let servicePath = resolve.sync(\'@vue/cli-service\', {  dir: cwd })

最终执行了 node ***/node_modules/@vue/cli-service/bin/vue-cli-service.js inspect 再带上参数：

调用了工具包 execa：

const execa = require(\'execa\')

execa(\'node\', [
  binPath,
  \'inspect\',
  ...(args.mode ? [\'--mode\', args.mode] : []),
  ...(args.rule ? [\'--rule\', args.rule] : []),
  ...(args.plugin ? [\'--plugin\', args.plugin] : []),
  ...(args.rules ? [\'--rules\'] : []),
  ...(args.plugins ? [\'--plugins\'] : []),
  ...(args.verbose ? [\'--verbose\'] : []),
  ...paths
], { cwd, stdio: \'inherit\' })

那我们接着往下看，后面就是去 cli-service 目录了：@vue/cli-service/lib/commands/inspect.js

通过 api.registerCommand 来注册一个:

module.exports = (api, options) => {
  api.registerCommand(\'inspect\', {

  }, args => {

  })
}

在回调函数里面会处理之前的 option 传递的参数：

1、处理 rule

if (args.rule) {
  res = config.module.rules.find(r => r.__ruleNames[0] === args.rule)
}

2、处理 plugin

if (args.plugin) {
  res = config.plugins.find(p => p.__pluginName === args.plugin)
}

3、处理 rules

if (args.rules) {
  res = config.module.rules.map(r => r.__ruleNames[0])
}

4、处理 plugins

if (args.plugins) {
  res = config.plugins.map(p => p.__pluginName || p.constructor.name)
}

其他分支情况比较少用，暂时不做展开。

最后多是通过 webpack-chain 的 toString 函数来生成，最终在控制台打印：

You can inspect the generated webpack config using config.toString(). This will generate a stringified version of the config with comment hints for named rules, uses and plugins.

const { toString } = require(\'webpack-chain\')
const output = toString(res, { verbose })

来源：https://segmentfault.com/a/1190000016260585