本系列一共6篇文章

Vue CLI 源码探索 [开篇] 整体介绍下 Vue CLI
Vue CLI 源码探索 [一] @vue/cli 包的概览，已经第一个命令 vue create
Vue CLI 源码探索 [二] 涉及三个命令（vue add/invoke/inspect）
Vue CLI 源码探索 [三] 和想象中不太一样的 vue serve/build
Vue CLI 源码探索 [四] 其他命令（vue init/outdated/upgrade/migrate/info//--help）
Vue CLI 源码探索 [五] 分析下 Vue CLI 中测试相关的内容
Vue CLI 源码探索 [六] 探索下 Vue CLI 的插件机制，内容较多，请慢慢看。涉及如下插件（@vue/cli-plugin-vuex/router/babel/typescript/eslint）

下面正文开始啦 ^_^

TEST

写业务代码，会有测试同学来保驾护航；维护一个工具库，你能想象没有测试的后果吗，许多人、各种环境，如果没有自动化测试，难以想象如果能够没有心里负担的发布一个版本

那么 Vue CLI 是怎么做测试的呢，让我们一起来了解下

寻找测试的痕迹

vue-cli/package.json 的 script 脚本中，第一个命令是 "test": "node scripts/test.js"

const minimist = require('minimist')
const rawArgs = process.argv.slice(2)
const args = minimist(rawArgs)

let regex
if (args.p) {
  // 从这里可知，我们可以传入 包名 作为参数
  const packages = (args.p || args.package).split(',').join('|')
  regex = `.*@vue/(${packages}|cli-plugin-(${packages}))/.*\\.spec\\.js$`
  const i = rawArgs.indexOf('-p')
  rawArgs.splice(i, 2)
}

const jestArgs = [
  '--env', 'node',
  '--runInBand',
  ...rawArgs,
  ...(regex ? [regex] : [])
]

console.log(`running jest with args: ${jestArgs.join(' ')}`)

require('jest').run(jestArgs)

上面这段代码已经清晰的告诉我们，测试工具 jest，为了熟悉这个工具可以大致浏览一下文档。

如果你直接执行 yarn test 那么会执行 packages 下的所有测试，我们这里仅仅想测试一个文件，那么如果做呢，仅仅需要修改 package.json 中的 jest 配置即可

"jest": {
    "testEnvironment": "node",
    "setupFiles": [
      "<rootDir>/scripts/testSetup.js"
    ],
    "testMatch": [
      // 前面都无变化，这里是重点，改成任何你想运行的测试即可
      "**/@vue/cli/__tests__/Creator.spec.js"
    ]
  }

Creator.spec.js

首先看下这个测试文件

// jest的mock功能是为了更加方便的测试
jest.mock('fs')
jest.mock('inquirer')

那么 js 和 inquirer 这两个mock的模块的位置呢，

vue-cli/mocks/fs.js

// memfs 是一个内存型的文件系统管理工具，这样就保证了测试时不会反复写入磁盘。
const { fs } = require('memfs')

// overwrite config path and context when fs is mocked
process.env.VUE_CLI_CONTEXT = '/'
process.env.VUE_CLI_CONFIG_PATH = '/.vuerc'

module.exports = fs

vue-cli/mocks/inquirer.js，这就是 jest的mock在这里的使用方式。

args.spec.js

这里我们看一个逻辑简单一点的测试

const path = require('path')
const execa = require('execa')

const CLI_PATH = path.resolve(__dirname, '..', 'bin', 'vue.js')

const runAsync = async args => await execa(CLI_PATH, args)

test('suggests matching command', async () => {
  // 这里构造输入的内容
  const { stdout } = await runAsync(['confgi'])
  // 因为脚本执行时，有相似性检测，所以这里提示出 config 这个词，说明测试通过
  expect(stdout).toContain('Did you mean config?')
})

参考

node程序调试

代码调试工具对于源码的理解真的是很方便的工具，前面几个命令解析的过程中是通过 console.log 的方式，真的是很难用。每个地方加 console.log，很痛苦。

所以就很怀念很久之前调试Java或者C#的代码的日子，点个点儿就完成了，很方便

launch.json配置

举个例子，调试 vue inpect 命令，launch.json的配置如下

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "skipFiles": [
        "<node_internals>/**"
      ],
      // 重点是这两行，首先命令是 vue
      "program": "${workspaceFolder}/packages/@vue/cli/bin/vue",
      // 然后参数是 inspect。此处改为其他的也很容易，例如 ["serve"] 等于执行 vue serve 或者 ["ui"] 等于执行 vue ui
      "args": ["inspect"]
    }
  ]
}

调试web程序

todo 可以用一个vue的项目试试，应该会比 console.log 的方式舒服。

感谢

使用VSCode调试你的node应用

文章中的这个配置json，非常易懂

{
  "type": "node",
  "request": "launch",
  "name": "调试inspect检查webpack config生成逻辑",
  "program": "${workspaceFolder}/node_modules/.bin/vue-cli-service",
  // 重点标记下
  "args": ["inspect"],
  "env": {
    "VUE_CLI_SERVICE_CONFIG_PATH": "${workspaceFolder}/build/vue.config.js"
  },
  "cwd": "${workspaceFolder}"
}

感谢阅读

原文地址

感谢你阅读到这里，翻译的不好的地方，还请指点。希望我的内容能让你受用，再次感谢。by llccing 千里

Vue CLI 源码探索 [五]