Nodejs除了赋予前端后端的能力外，还能有各种各样的脚本，极大的简单各种操作。在早期，脚本做的工作大都是生成固定的模版，所以你需要了解的，仅仅生成的项目就够了。然而，随着框架的完善，架构师往往希望通过脚本处理默认的配置或者环境，这样能减少环境差异导致的问题，还能简化升级核心框架的升级，例如Vue CLI做的事。
这时候，我们不得不探一探它的神秘面纱。
这次带来的是Create的原理解析。
Package
怎么看的呢？第一步是寻找package.json文件，它定义了项目所需的依赖以及项目的名称等信息，所以都存这样的文件。CLI的脚本放在bin属性下，它会随着安装放入系统的环境变量中，所以我们可以在任意的位置使用它。
在Vue CLI的项目中，目录结构是奇怪的。一般情况下，最外面的是项目本身，也就是CLI工程，然而它是文档。他的CLI项目放在packages/@vue目录下。
这里做个备注，此时的hash值是7375b12c8e75bd4ddc5f04a475512971e1f2bd04，你们可以看这个位置的源码。
里面的CLI项目很多，不过我这次找的算简单的，在cli的这个项目里，他的package.json如下。
{
"name": "@vue/cli",
"version": "3.6.3",
"description": "Command line interface for rapid Vue.js development",
"bin": {
"vue": "bin/vue.js"
},
//...
}
bin/vue.js这是所执行的脚本。
vue.js
接下来看一下第一个脚本。
#!/usr/bin/env node
// 定义使用node环境
const minimist = require('minimist')
const program = require('commander')
const loadCommand = require('../lib/util/loadCommand')
program
.command('create <app-name>')
.description('create a new project powered by vue-cli-service')
.option('-p, --preset <presetName>', 'Skip prompts and use saved or remote preset')
//...more option
.option('--skipGetStarted', 'Skip displaying "Get started" instructions')
.action((name, cmd) => {
const options = cleanArgs(cmd)
if (minimist(process.argv.slice(3))._.length > 1) {
console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'))
}
// --git makes commander to default git to true
if (process.argv.includes('-g') || process.argv.includes('--git')) {
options.forceGit = true
}
require('../lib/create')(name, options)
})
// commander passes the Command object itself as options,
// extract only actual options into a fresh object.
function cleanArgs (cmd) {
const args = {}
cmd.options.forEach(o => {
const key = camelize(o.long.replace(/^--/, ''))
// if an option is not present and Command has a method with the same name
// it should not be copied
if (typeof cmd[key] !== 'function' && typeof cmd[key] !== 'undefined') {
args[key] = cmd[key]
}
})
return args
}
上面，我只拷贝了相关代码。
我们可以看到，create命令是通过commander创建的，这是个转换命令行的工具，简单说就是将vue create xxx --a aaa --b vvv这些东西格式化。cleanArgs函数，将program属性想换为配置对象，便于后面的操作
其中process是node的线程也是就是这次命令的线程，它可以用来获取当前目录以及变量等，当然也可以通过它异常结束。比如process.argv.slice(3)这因为在命令行中，第一个变量是自己本身，而vue create分别占据第二第三变量，所需从第四个起。
minimist也是同样，起到格式化的作用，详见它的文档。
接下来，它调用../lib/create脚本。
create
第二个脚本
const fs = require('fs-extra')
const path = require('path')
const chalk = require('chalk')
const inquirer = require('inquirer')
const Creator = require('./Creator')
const { clearConsole } = require('./util/clearConsole')
const { getPromptModules } = require('./util/createTools')
const { error, stopSpinner, exit } = require('@vue/cli-shared-utils')
const validateProjectName = require('validate-npm-package-name')
async function create (projectName, options) {
if (options.proxy) {
process.env.HTTP_PROXY = options.proxy
}
const cwd = options.cwd || process.cwd()
const inCurrent = projectName === '.'
const name = inCurrent ? path.relative('../', cwd) : projectName
const targetDir = path.resolve(cwd, projectName || '.')
const result = validateProjectName(name)
if (!result.validForNewPackages) {
console.error(chalk.red(`Invalid project name: "${name}"`))
result.errors && result.errors.forEach(err => {
console.error(chalk.red.dim('Error: ' + err))
})
result.warnings && result.warnings.forEach(warn => {
console.error(chalk.red.dim('Warning: ' + warn))
})
exit(1)
}
if (fs.existsSync(targetDir)) {
if (options.force) {
await fs.remove(targetDir)
} else {
await clearConsole()
if (inCurrent) {
const { ok } = await inquirer.prompt([
{
name: 'ok',
type: 'confirm',
message: `Generate project in current directory?`
}
])
if (!ok) {
return
}
} else {
const { action } = await inquirer.prompt([
{
name: 'action',
type: 'list',
message: `Target directory ${chalk.cyan(targetDir)} already exists. Pick an action:`,
choices: [
{ name: 'Overwrite', value: 'overwrite' },
{ name: 'Merge', value: 'merge' },
{ name: 'Cancel', value: false }
]
}
])
if (!action) {
return
} else if (action === 'overwrite') {
console.log(`\nRemoving ${chalk.cyan(targetDir)}...`)
await fs.remove(targetDir)
}
}
}
}
const creator = new Creator(name, targetDir, getPromptModules())
await creator.create(options)
}
module.exports = (...args) => {
return create(...args).catch(err => {
stopSpinner(false) // do not persist
error(err)
if (!process.env.VUE_CLI_TEST) {
process.exit(1)
}
})
}
module.exports = (...args)接受不定参，然后，不管是传入也好调用也好，都是固定的两个参数，不明白这里的目的，偷懒？
这里的代码大部分都是对命令行参数的校验与解析，不存在难点。
最后，通过new Creator(name, targetDir, getPromptModules())创建创建者对象，以及执行create。所以重点在Creator对象中。
Creator
太长了！😖所以这部分不细说了，大体上与之前一致，只不过复杂点。值得一提的是Creator继承了EventEmitter，所以它在创建过程的不同阶段发布事件，根据这个，我们可以拆分着看。
this.emit('creation', { event: 'fetch-remote-preset' })
this.emit('creation', { event: 'creating' })
this.emit('creation', { event: 'git-init' })
this.emit('creation', { event: 'plugins-install' })
this.emit('creation', { event: 'invoking-generators' })
this.emit('creation', { event: 'deps-install' })
this.emit('creation', { event: 'completion-hooks' })
this.emit('creation', { event: 'done' })
一共有以上几个事件，当然，也有可能由于配置原因，某些步骤会跳过。比如设置shouldInitGit为false。
大体上就是这样。唉，这可能是唯一的一篇讲解Vue CLI源码的文章，太忙了（我是后端，后端，后端~~）
本文作者：Mr.J
本文链接：https://www.dnocm.com/articles/beechnut/vue-cli-create/
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
