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

leiyi 发布于2019-08-23 11:42 / 991人阅读

摘要：首先，请记住它在新版本的脚手架项目里面非常重要它有什么用呢能快速地在控制台看到对应生成的配置对象。最后多是通过的函数来生成，最终在控制台打印

首先，请记住：

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

它有什么用呢？

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 ")
  .option("--rule ", "inspect a specific module rule")
  .option("--plugin ", "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 })

云服务器 GPU云服务器 vue-cli3 vue-cli vue源码 VUE实现webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97351.html

[全网最全的 Vue CLI 3 原创合集] 你要的这里都有

摘要：慢慢地，关于的原创学习文章已经写了多篇了会一直放出来，目前篇，因此做一个合集，献给那些对新版本脚手架使用和背后设计感兴趣的同学，都是一步一步去看源码，也给官方提了几次，合进去了几个原创不易，欢迎大家互相转发，期望大家一起快速过度到版本目录慢慢地，关于 Vue CLI 3 的原创学习文章已经写了 20 多篇了（会一直放出来，目前 23 篇），因此做一个合集，献给那些对新版本脚手架使用...

phpmatt 2019-08-23 12:00 评论0 收藏0
vue-cli 3.0 源码分析

摘要：写在前面其实最开始不是特意来研究的源码，只是想了解下的命令，如果想要了解命令的话，那么绕不开写的。通过分析发现与相比，变化太大了，通过引入插件系统，可以让开发者利用其暴露的对项目进行扩展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 写在前面其实最开始不是特意来研究 vue-cli 的源码，只是想了解下 n...

yiliang 2019-08-23 15:11 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

xuweijian 2019-08-29 16:28 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

UsherChen 2019-08-26 12:18 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

ZoomQuiet 2019-08-02 11:20 评论0 收藏0