[Vue CLI 3] vue inspect 的源码设想完成

2023年12月21日 205次阅读 来源: dailyvuejs

起首，请记着：

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

它有什么用呢？

inspect internal webpack config

能疾速地在控制台看到对应天生的 webpack 设置对象。

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

照样依靠了工具包 commander

const program = require('commander')

代码设置以下：

program
  .command('inspect [paths...]')
  .description('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', { basedir: 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 })
    原文作者：dailyvuejs
    原文地址: https://segmentfault.com/a/1190000016260585
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞