[Vue CLI 3] vue inspect 的源码设计实现
首先，请记住：
它在新版本的脚手架项目里面非常重要, [Vue CLI 3] 源码系列之init
它有什么用呢？
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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！