[Vue CLI 3] vue inspect 的源码设计实现
Posted lovellll
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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...]‘)
.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 })
来源:https://segmentfault.com/a/1190000016260585
以上是关于[Vue CLI 3] vue inspect 的源码设计实现的主要内容,如果未能解决你的问题,请参考以下文章
vue-cli3与vue-cli2的区别和vue-cli 怎么修改配置
vue-cli3与vue-cli2的区别和vue-cli 怎么修改配置
vue-cli2,vue-cli3(vue脚手架)超详细教程
vue-cli2,vue-cli3(vue脚手架)超详细教程