剖析VueCli3源码系列四：cmd窗口清屏、获取/校验/储存preset参数、可选参数的使用

2023-10-08 09:53:40

大家好，欢迎来到VueCli3源码系列的第四篇文章，在这一篇中，我们将继续深入研究VueCli3的源代码，重点关注cmd窗口清屏、获取/校验/储存preset参数、可选参数的使用等功能。通过对这些功能的剖析，我们将进一步增强对脚手架的底层实现和工作原理的理解。

一、cmd窗口清屏

在创建新项目时，Vue CLI通常会先清屏，以便为项目创建过程提供一个干净的输出环境。实现清屏功能的核心代码位于node_modules/@vue/cli/lib/cli-service.js文件中。它使用process.platform变量来判断当前操作系统的类型，并根据不同的操作系统类型调用相应的清屏命令。例如，对于Windows系统，它会调用cls命令，而对于Unix系统，它会调用clear命令。

// node_modules/@vue/cli/lib/cli-service.js

const clearConsole = () => {
  if (process.platform === 'win32') {
    process.stdout.write('\x1bc')
  } else {
    process.stdout.write('\x1b[2J\x1b[0f')
  }
}

二、获取/校验/储存preset参数

Vue CLI允许用户通过命令行参数指定预设的项目配置，这些预设配置称为preset。preset可以极大地简化项目的创建过程，并确保项目按照特定的规范和约定进行搭建。

1. 获取preset参数

获取preset参数的代码位于node_modules/@vue/cli/lib/cli-service.js文件中。它首先从命令行参数中获取--preset参数的值，如果未指定--preset参数，则使用默认的preset。

// node_modules/@vue/cli/lib/cli-service.js

const preset = options.preset || api.config.defaultPreset

2. 校验preset参数

获取preset参数后，需要对其进行校验，以确保它是一个合法的preset。校验的代码位于node_modules/@vue/cli/lib/preset.js文件中。它首先检查preset参数是否存在，如果不存在，则抛出错误。然后，它会检查preset参数是否是一个字符串，如果preset参数不是字符串，则抛出错误。最后，它会检查preset参数是否是一个有效的preset名称，如果preset参数不是一个有效的preset名称，则抛出错误。

// node_modules/@vue/cli/lib/preset.js

const validatePreset = (id, preset) => {
  if (!id) {
    throw new Error('Preset ID is required.')
  }
  if (typeof id !== 'string') {
    throw new Error('Preset ID must be a string.')
  }
  if (!isPreset(id, preset)) {
    throw new Error(`"${id}" is not a valid preset.`)
  }
}

3. 储存preset参数

校验preset参数后，需要将其存储起来，以便后续使用。存储preset参数的代码位于node_modules/@vue/cli/lib/cli-service.js文件中。它使用api.service.run方法将preset参数存储到.vuerc文件中。

// node_modules/@vue/cli/lib/cli-service.js

api.service.run('savePreset', preset)

三、可选参数的使用

Vue CLI还支持多种可选参数，这些可选参数可以用来修改项目的默认配置。可选参数的代码位于node_modules/@vue/cli/lib/cli-service.js文件中。它首先从命令行参数中获取所有可选参数，然后将这些可选参数传递给相应的函数进行处理。

// node_modules/@vue/cli/lib/cli-service.js

const args = process.argv.slice(2)
for (const arg of args) {
  if (arg.startsWith('--')) {
    const option = arg.slice(2)
    const value = args[args.indexOf(arg) + 1]
    if (typeof value === 'string' && value.startsWith('--')) {
      continue
    }
    options[option] = value
  }
}

例如，--name参数可以用来指定项目的名称，--router参数可以用来指定是否使用路由，--vuex参数可以用来指定是否使用Vuex。

// node_modules/@vue/cli/lib/cli-service.js

if (options.name) {
  api.service.run('setName', options.name)
}
if (options.router) {
  api.service.run('useRouter')
}
if (options.vuex) {
  api.service.run('useVuex')
}