共计 14534 个字符，预计需要花费 37 分钟才能阅读完成。
前言
上文简略介绍了 vue - V 的执行过程，本文在此基础上，持续剖析 vue create 的执行过程，理解 vue create <app-name> 经验了哪些过程？
注释
文件门路：/packages/@vue/cli/bin/vue.js
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')
// 省略 option 相干代码
...
.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解析到 create <app-name> 命令，会主动执行 action 办法中的回调函数。首先是调用 cleanArgs 办法，它的作用是将传递的 Command 对象 cnd，提取理论的选项到一个新对象中作为 options，次要是为了可读性，5.0 版本曾经将这个办法删除。间接传递 Command 对象作为options 变量，理解即可。而后就是校验命令输出的非 options 参数是否超过 1 个，若是则揭示用户，将应用第一个非 option 参数作为项目名称。其次是判断是否有 -g 选项并从新赋值 forceGit 防止歧义。最重要就是执行 /lib/create 函数。
create.js
文件门路：/packages/@vue/cli/lib/create.js
module.exports = (...args) => {return create(...args).catch(err => {stopSpinner(false) // do not persist
error(err)
if (!process.env.VUE_CLI_TEST) {process.exit(1)
}
})
}执行文件定义 createasync 函数, 其中...args 残余参数能够作为参数传递的小技巧。如果抛出异样则执行 catch 函数。
create
async function create (projectName, options) {
// 是否有 --proxy，若有则定义 process.env.HTTP_PROXY 变量
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)
}
// 判断生成指标文件夹是否存在且命令行没有 --merge 选项
if (fs.existsSync(targetDir) && !options.merge) {
// 有 --force 选项，间接移除已存在的指标文件夹
if (options.force) {await fs.remove(targetDir)
} else {await clearConsole()
if (inCurrent) {
// 1. 当前目录创立我的项目，询问是否持续，否则退出，是则持续
const {ok} = await inquirer.prompt([
{
name: 'ok',
type: 'confirm',
message: `Generate project in current directory?`
}
])
if (!ok) {return}
} else {
// 1. 非当前目录创立我的项目，给出 3 个抉择：Overwrite、Merge、Cancel
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}
]
}
])
// cancel 间接退出
if (!action) {return} else if (action === 'overwrite') {
// overwrite 删除原文件夹，抉择 merge 就是继续执行上面代码
console.log(`\nRemoving ${chalk.cyan(targetDir)}...`)
await fs.remove(targetDir)
}
}
}
}
const creator = new Creator(name, targetDir, getPromptModules())
await creator.create(options)
}在当前目录创立我的项目, 会执行 vue create ., 所以通过projectName === '.' 是否为当前目录。validateProjectName函数则是校验项目名称是否合乎 npm 包名规范，如不合乎则正告并退出。接着就是校验要生成指标文件夹是否已存在，若已存在，则抉择是否继续执行（merge），或者间接退出执行，以及删除已存在文件夹继续执行生成我的项目。最终就是生成 Creator 实例 creator，通过creator 的create办法来创立新的我的项目。
Creator
文件门路：/packages/@vue/cli/lib/Creator.js
将创立我的项目的相干逻辑封装到了 Creator 类中。首先从构造函数开始
class Creator extends EventEmitter {constructor (name, context, promptModules) {super()
this.name = name
this.context = process.env.VUE_CLI_CONTEXT = context
const {presetPrompt, featurePrompt} = this.resolveIntroPrompts()
this.presetPrompt = presetPrompt
this.featurePrompt = featurePrompt
this.outroPrompts = this.resolveOutroPrompts()
this.injectedPrompts = []
// 回调函数数组
this.promptCompleteCbs = []
this.afterInvokeCbs = []
this.afterAnyInvokeCbs = []
this.run = this.run.bind(this)
const promptAPI = new PromptModuleAPI(this)
// 获取 cli/lib/promptModules 下所有函数，并传入 promptAPI 作为参数
promptModules.forEach(m => m(promptAPI))
}
}实例化 Creator 类会接管 3 个参数，别离是 项目名称 name， 生成指标文件夹门路 targetDir, 以及promptModules。这里传入的promptModules 是由 getPromptModules 函数生成。它会返回函数数组，别离动静援用了 cli/lib/promptModules 各个文件暴露出的函数，每个函数都会接管 PromptModuleAPI 实例做为 cli 参数。这里不过多介绍 PromptModuleAPI 类，你能够简略了解为对 creator 实例的二次封装。通过 PromptModuleAPI 实例来实现对 命令行交互提醒 相干逻辑的操作。
文件门路：/packages/@vue/cli/lib/utils/createTools.js
exports.getPromptModules = () => {
return [
'vueVersion',
'babel',
'typescript',
'pwa',
'router',
'vuex',
'cssPreprocessors',
'linter',
'unit',
'e2e'
].map(file => require(`../promptModules/${file}`))
}其中 presetPrompt 与featurePrompt由 Creator 类的 resolveIntroPrompts 办法生成。
resolveIntroPrompts () {
// 获取 preset 对象
const presets = this.getPresets()
// preset 对象转换成 array
const presetChoices = Object.entries(presets).map(([name, preset]) => {
let displayName = name
if (name === 'default') {displayName = 'Default'} else if (name === '__default_vue_3__') {displayName = 'Default (Vue 3 Preview)'
}
return {name: `${displayName} (${formatFeatures(preset)})`,
value: name
}
})
// 生成 presetPrompt
const presetPrompt = {
name: 'preset',
type: 'list',
message: `Please pick a preset:`,
choices: [
...presetChoices,
{
name: 'Manually select features',
value: '__manual__'
}
]
}
// 生成 featurePrompt
const featurePrompt = {
name: 'features',
when: isManualMode,
type: 'checkbox',
message: 'Check the features needed for your project:',
choices: [],
pageSize: 10
}
return {
presetPrompt,
featurePrompt
}
}在 resolveIntroPrompts 函数中会首先执行 getPresets 办法来获取 preset。从这里开始就用到 option.js 相干的操作 loadOptions。在 vue create 过程中保留的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。所以resolveIntroPrompts 函数会读取 .vuerc 的 preset。而后将默认内置的 defaults.presets 合并成残缺的 preset 列表对象。
exports.defaults = {
lastChecked: undefined,
latestVersion: undefined,
packageManager: undefined,
useTaobaoRegistry: undefined,
presets: {'default': Object.assign({ vueVersion: '2'}, exports.defaultPreset),
'__default_vue_3__': Object.assign({vueVersion: '3'}, exports.defaultPreset)
}
}
getPresets () {const savedOptions = loadOptions()
return Object.assign({}, savedOptions.presets, defaults.presets)
}文件门路：/packages/@vue/cli/lib/options.js
let cachedOptions
exports.loadOptions = () => {
// 存在则返回缓存的 Options
if (cachedOptions) {return cachedOptions}
// rcPath 个别为用户目录下的.vuerc 文件的绝对路径
if (fs.existsSync(rcPath)) {
try {cachedOptions = JSON.parse(fs.readFileSync(rcPath, 'utf-8'))
} catch (e) {
error(
`Error loading saved preferences: ` +
`~/.vuerc may be corrupted or have syntax errors. ` +
`Please fix/delete it and re-run vue-cli in manual mode.\n` +
`(${e.message})`
)
exit(1)
}
validate(cachedOptions, schema, () => {
error(
`~/.vuerc may be outdated. ` +
`Please delete it and re-run vue-cli in manual mode.`
)
})
return cachedOptions
} else {return {}
}
}- preset 示例
{
"useConfigFiles": true,
"cssPreprocessor": "sass",
"plugins": {"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "airbnb",
"lintOn": ["save", "commit"]
},
"@vue/cli-plugin-router": {},
"@vue/cli-plugin-vuex": {}}
}outroPrompts则是由 resolveOutroPrompts() 生成, 封装了命令行执行的结尾相干的 Prompt, 如是否拆分单个配置化文件，是否保留 preset 到 .vuerc 等。最初还会判断是否有设置默认包管理器，没有的话（换句话说，第一次执行vue create <app-name>）则减少抉择默认包管理器的交互提醒。
resolveOutroPrompts () {
const outroPrompts = [
{
name: 'useConfigFiles',
when: isManualMode,
type: 'list',
message: 'Where do you prefer placing config for Babel, ESLint, etc.?',
choices: [
{
name: 'In dedicated config files',
value: 'files'
},
{
name: 'In package.json',
value: 'pkg'
}
]
},
{
name: 'save',
when: isManualMode,
type: 'confirm',
message: 'Save this as a preset for future projects?',
default: false
},
{
name: 'saveName',
when: answers => answers.save,
type: 'input',
message: 'Save preset as:'
}
]
// ask for packageManager once
const savedOptions = loadOptions()
if (!savedOptions.packageManager && (hasYarn() || hasPnpm3OrLater())) {const packageManagerChoices = []
if (hasYarn()) {
packageManagerChoices.push({
name: 'Use Yarn',
value: 'yarn',
short: 'Yarn'
})
}
if (hasPnpm3OrLater()) {
packageManagerChoices.push({
name: 'Use PNPM',
value: 'pnpm',
short: 'PNPM'
})
}
packageManagerChoices.push({
name: 'Use NPM',
value: 'npm',
short: 'NPM'
})
outroPrompts.push({
name: 'packageManager',
type: 'list',
message: 'Pick the package manager to use when installing dependencies:',
choices: packageManagerChoices
})
}
return outroPrompts
}create 办法
真正生成我的项目的逻辑则是调用了 creator 实例的 create 办法。由上文可知，cliOptions是命令行的参数选项形成的对象，preset不传默认是 null。所以会生成 preset 对象，代码中分为 4 种状况，这里剖析最初一种，通过 promptAndResolvePreset 办法生成 preset 对象。
async create (cliOptions = {}, preset = null) {
const isTestOrDebug = process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG
const {run, name, context, afterInvokeCbs, afterAnyInvokeCbs} = this
if (!preset) {if (cliOptions.preset) {
// vue create foo --preset bar
preset = await this.resolvePreset(cliOptions.preset, cliOptions.clone)
} else if (cliOptions.default) {
// vue create foo --default
preset = defaults.presets.default
} else if (cliOptions.inlinePreset) {// vue create foo --inlinePreset {...}
try {preset = JSON.parse(cliOptions.inlinePreset)
} catch (e) {error(`CLI inline preset is not valid JSON: ${cliOptions.inlinePreset}`)
exit(1)
}
} else {preset = await this.promptAndResolvePreset()
}
}
// clone before mutating
preset = cloneDeep(preset)
// inject core service
preset.plugins['@vue/cli-service'] = Object.assign({projectName: name}, preset)
if (cliOptions.bare) {preset.plugins['@vue/cli-service'].bare = true
}
// legacy support for router
if (preset.router) {preset.plugins['@vue/cli-plugin-router'] = {}
if (preset.routerHistoryMode) {preset.plugins['@vue/cli-plugin-router'].historyMode = true
}
}
// Introducing this hack because typescript plugin must be invoked after router.
// Currently we rely on the `plugins` object enumeration order,
// which depends on the order of the field initialization.
// FIXME: Remove this ugly hack after the plugin ordering API settled down
if (preset.plugins['@vue/cli-plugin-router'] && preset.plugins['@vue/cli-plugin-typescript']) {const tmp = preset.plugins['@vue/cli-plugin-typescript']
delete preset.plugins['@vue/cli-plugin-typescript']
preset.plugins['@vue/cli-plugin-typescript'] = tmp
}
// legacy support for vuex
if (preset.vuex) {preset.plugins['@vue/cli-plugin-vuex'] = {}}
const packageManager = (
cliOptions.packageManager ||
loadOptions().packageManager ||
(hasYarn() ? 'yarn' : null) ||
(hasPnpm3OrLater() ? 'pnpm' : 'npm')
)
await clearConsole()
const pm = new PackageManager({context, forcePackageManager: packageManager})
log(`✨ Creating project in ${chalk.yellow(context)}.`)
this.emit('creation', { event: 'creating'})
// get latest CLI plugin version
const {latestMinor} = await getVersions()
// generate package.json with plugin dependencies
const pkg = {
name,
version: '0.1.0',
private: true,
devDependencies: {},
...resolvePkg(context)
}
const deps = Object.keys(preset.plugins)
deps.forEach(dep => {if (preset.plugins[dep]._isPreset) {return}
let {version} = preset.plugins[dep]
if (!version) {if (isOfficialPlugin(dep) || dep === '@vue/cli-service' || dep === '@vue/babel-preset-env') {version = isTestOrDebug ? `file:${path.resolve(__dirname, '../../../', dep)}` : `~${latestMinor}`
} else {version = 'latest'}
}
pkg.devDependencies[dep] = version
})
// write package.json
await writeFileTree(context, {'package.json': JSON.stringify(pkg, null, 2)
})
// generate a .npmrc file for pnpm, to persist the `shamefully-flatten` flag
if (packageManager === 'pnpm') {const pnpmConfig = hasPnpmVersionOrLater('4.0.0')
? 'shamefully-hoist=true\n'
: 'shamefully-flatten=true\n'
await writeFileTree(context, {'.npmrc': pnpmConfig})
}
if (packageManager === 'yarn' && semver.satisfies(process.version, '8.x')) {
// Vue CLI 4.x should support Node 8.x,
// but some dependenices already bumped `engines` field to Node 10
// and Yarn treats `engines` field too strictly
await writeFileTree(context, {'.yarnrc': '# Hotfix for Node 8.x\n--install.ignore-engines true\n'})
}
// intilaize git repository before installing deps
// so that vue-cli-service can setup git hooks.
const shouldInitGit = this.shouldInitGit(cliOptions)
if (shouldInitGit) {log(`🗃 Initializing git repository...`)
this.emit('creation', { event: 'git-init'})
await run('git init')
}
// install plugins
log(`⚙\u{fe0f} Installing CLI plugins. This might take a while...`)
log()
this.emit('creation', { event: 'plugins-install'})
if (isTestOrDebug && !process.env.VUE_CLI_TEST_DO_INSTALL_PLUGIN) {
// in development, avoid installation process
await require('./util/setupDevProject')(context)
} else {await pm.install()
}
// run generator
log(`🚀 Invoking generators...`)
this.emit('creation', { event: 'invoking-generators'})
const plugins = await this.resolvePlugins(preset.plugins, pkg)
const generator = new Generator(context, {
pkg,
plugins,
afterInvokeCbs,
afterAnyInvokeCbs
})
await generator.generate({extractConfigFiles: preset.useConfigFiles})
// install additional deps (injected by generators)
log(`📦 Installing additional dependencies...`)
this.emit('creation', { event: 'deps-install'})
log()
if (!isTestOrDebug || process.env.VUE_CLI_TEST_DO_INSTALL_PLUGIN) {await pm.install()
}
// run complete cbs if any (injected by generators)
log(`⚓ Running completion hooks...`)
this.emit('creation', { event: 'completion-hooks'})
for (const cb of afterInvokeCbs) {await cb()
}
for (const cb of afterAnyInvokeCbs) {await cb()
}
if (!generator.files['README.md']) {
// generate README.md
log()
log('📄 Generating README.md...')
await writeFileTree(context, {'README.md': generateReadme(generator.pkg, packageManager)
})
}
// commit initial state
let gitCommitFailed = false
if (shouldInitGit) {await run('git add -A')
if (isTestOrDebug) {await run('git', ['config', 'user.name', 'test'])
await run('git', ['config', 'user.email', 'test@test.com'])
await run('git', ['config', 'commit.gpgSign', 'false'])
}
const msg = typeof cliOptions.git === 'string' ? cliOptions.git : 'init'
try {await run('git', ['commit', '-m', msg, '--no-verify'])
} catch (e) {gitCommitFailed = true}
}
// log instructions
log()
log(`🎉 Successfully created project ${chalk.yellow(name)}.`)
if (!cliOptions.skipGetStarted) {
log(
`👉 Get started with the following commands:\n\n` +
(this.context === process.cwd() ? `` : chalk.cyan(` ${chalk.gray('$')} cd ${name}\n`)) +
chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn serve' : packageManager === 'pnpm' ? 'pnpm run serve' : 'npm run serve'}`)
)
}
log()
this.emit('creation', { event: 'done'})
if (gitCommitFailed) {
warn(
`Skipped git commit due to missing username and email in git config, or failed to sign commit.\n` +
`You will need to perform the initial commit yourself.\n`
)
}
generator.printExitLogs()}- promptAndResolvePreset 办法
实质上就是应用 inquirer 库来执行 creator 实例中所有相干的 Prompt, 通过用户抉择手动模式或预设模式来生成相应的preset 对象。
async promptAndResolvePreset (answers = null) {
// prompt
if (!answers) {await clearConsole(true)
// 外围代码
answers = await inquirer.prompt(this.resolveFinalPrompts())
}
debug('vue-cli:answers')(answers)
if (answers.packageManager) {
saveOptions({packageManager: answers.packageManager})
}
let preset
// 内置保留 preset
if (answers.preset && answers.preset !== '__manual__') {preset = await this.resolvePreset(answers.preset)
} else {
// 手动抉择我的项目各个个性
// manual
preset = {
useConfigFiles: answers.useConfigFiles === 'files',
plugins: {}}
answers.features = answers.features || []
// run cb registered by prompt modules to finalize the preset
this.promptCompleteCbs.forEach(cb => cb(answers, preset))
}
// validate
validatePreset(preset)
// save preset
if (answers.save && answers.saveName && savePreset(answers.saveName, preset)) {log()
log(`🎉 Preset ${chalk.yellow(answers.saveName)} saved in ${chalk.yellow(rcPath)}`)
}
debug('vue-cli:preset')(preset)
return preset
}其中 resolveFinalPrompts 函数就是获取所有相干的 Prompts。
resolveFinalPrompts () {
// patch generator-injected prompts to only show in manual mode
// 手动模式下才执行 injectedPrompts 数组提醒
this.injectedPrompts.forEach(prompt => {const originalWhen = prompt.when || (() => true)
prompt.when = answers => {return isManualMode(answers) && originalWhen(answers)
}
})
const prompts = [
this.presetPrompt,
this.featurePrompt,
...this.injectedPrompts,
...this.outroPrompts
]
debug('vue-cli:prompts')(prompts)
return prompts
}
正文完
