Vue-cli
「 desc 」
Explanation
"version": "3.0.0-beta.9",
使用
vue create my-project
本目录
package.json
请不要用单一库, 来看待 vue-cli
我们下载时使用 npm install -g @vue/cli
@vue 什么东西, 你可以将
@vue - 组织
|cli - 其中之一产品
构成 多个库packages
的形式, 是使用lerna.json
- 一个用于管理多个包的JavaScript项目的工具。
@vue/cli
packages/@vue/cli/package.json
"name": "@vue/cli", // 上传 npm 名字
"bin": {
"vue": "bin/vue.js" // 命令
},
bin/vue.js
1. node-版本-要求
代码 11-17
if (!semver.satisfies(process.version, requiredVersion)) {
console.log(chalk.red(
`You are using Node ${process.version}, but this version of vue-cli ` +
`requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
))
process.exit(1)
}
- 1.1 semver
npm的语义版本
2. 调试模式
代码 19-27
// enter debug mode when creating test repo
if (
slash(process.cwd()).indexOf('/packages/test') > 0 && (
fs.existsSync(path.resolve(process.cwd(), '../@vue')) ||
fs.existsSync(path.resolve(process.cwd(), '../../@vue'))
)
) {
process.env.VUE_CLI_DEBUG = true
}
- 2.1 slash
统一 window
和 unix
斜号
3. 命令解析
代码 29-34
const program = require('commander')
const loadCommand = require('../lib/util/loadCommand')
program
.version(require('../package').version)
.usage('<command> [options]')
命令缩影
- vue create
[options] <app-name> 创建一个由vue-cli-service支持的新项目
- vue add
<plugin> [pluginOptions] 安装插件并在已创建的项目中调用其生成器
⬇️ - vue invoke
<plugin> [pluginOptions] 在已创建的项目中调用插件的生成器
⬆️ - vue inspect
[options] [paths...] 使用vue-cli-service检查项目中的webpack配置
- vue serve
[options] [entry] 在零配置下以开发模式提供.js或.vue文件
- vue build
[options] [entry] 在生产模式下使用零配置构建.js或.vue文件
- vue init
<template> <app-name> 从远程模板(传统API,需要@vue)生成项目
3.1 vue create
代码 36-50
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('-d, --default', 'Skip prompts and use default preset')
.option('-i, --inlinePreset <json>', 'Skip prompts and use inline JSON string as preset')
.option('-m, --packageManager <command>', 'Use specified npm client when installing dependencies')
.option('-r, --registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
.option('-g, --git [message]', 'Force / skip git intialization, optionally specify initial commit message')
.option('-f, --force', 'Overwrite target directory if it exists')
.option('-c, --clone', 'Use git clone when fetching remote preset')
.option('-x, --proxy', 'Use specified proxy when creating project')
.action((name, cmd) => {
require('../lib/create')(name, cleanArgs(cmd))
})
3.2 vue add
代码 52-58
program
.command('add <plugin> [pluginOptions]')
.allowUnknownOption()
.description('install a plugin and invoke its generator in an already created project')
.action((plugin) => {
require('../lib/add')(plugin, minimist(process.argv.slice(3)))
})
解析参数选项
3.3 vue invoke
代码 60-66
program
.command('invoke <plugin> [pluginOptions]')
.allowUnknownOption()
.description('invoke the generator of a plugin in an already created project')
.action((plugin) => {
require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
})
3.4 vue inspect
代码 68-75
program
.command('inspect [paths...]')
.option('--mode <mode>')
.option('--rule <ruleName>', 'inspect a specific module rule')
.option('--plugin <pluginName>', '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')
.description('inspect the webpack config in a project with vue-cli-service')
.action((paths, cmd) => {
require('../lib/inspect')(paths, cleanArgs(cmd))
})
清理没有命令
3.5 vue serve
代码
program
.command('serve [entry]')
.description('serve a .js or .vue file in development mode with zero config')
.option('-o, --open', 'Open browser')
.action((entry, cmd) => {
loadCommand('serve', '@vue/cli-service-global').serve(entry, cleanArgs(cmd))
})
3.6 vue build
代码 85-93
program
.command('build [entry]')
.option('-t, --target <target>', 'Build target (app | lib | wc | wc-async, default: app)')
.option('-n, --name <name>', 'name for lib or web-component mode (default: entry filename)')
.option('-d, --dest <dir>', 'output directory (default: dist)')
.description('build a .js or .vue file in production mode with zero config')
.action((entry, cmd) => {
loadCommand('build', '@vue/cli-service-global').build(entry, cleanArgs(cmd))
})
3.7 vue init
代码
program
.command('init <template> <app-name>')
.description('generate a project from a remote template (legacy API, requires @vue/cli-init)')
.option('-c, --clone', 'Use git clone when fetching remote template')
.action(() => {
loadCommand('init', '@vue/cli-init')
})
3.8 命令溢出
代码 103-110
// output help information on unknown commands
program
.arguments('<command>')
.action((cmd) => {
program.outputHelp()
console.log(` ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`))
console.log()
})
3.9 命令帮助
代码 112-119
// add some useful info on help
program.on('--help', () => {
console.log()
console.log(` Run ${chalk.cyan(`vue <command> --help`)} for detailed usage of given command.`)
console.log()
})
program.commands.forEach(c => c.on('--help', () => console.log()))
3.10 命令错误
代码 121-161
// enhance common error messages
const enhanceErrorMessages = (methodName, log) => {
program.Command.prototype[methodName] = function (...args) {
if (methodName === 'unknownOption' && this._allowUnknownOption) {
return
}
this.outputHelp()
console.log(` ` + chalk.red(log(...args)))
console.log()
process.exit(1)
}
}
enhanceErrorMessages('missingArgument', argName => {
return `Missing required argument ${chalk.yellow(`<${argName}>`)}.`
})
enhanceErrorMessages('unknownOption', optionName => {
return `Unknown option ${chalk.yellow(optionName)}.`
})
enhanceErrorMessages('optionMissingArgument', (option, flag) => {
return `Missing required argument for option ${chalk.yellow(option.flags)}` + (
flag ? `, got ${chalk.yellow(flag)}` : ``
)
})
program.parse(process.argv)
if (!process.argv.slice(2).length) {
program.outputHelp()
}
cleanArgs
//命令将Command对象本身作为选项传递,
//仅将实际选项提取到新对象中。
function cleanArgs (cmd) {
const args = {}
cmd.options.forEach(o => {
const key = o.long.replace(/^--/, '')
//如果一个选项不存在并且Command有一个同名的方法
//它不应该被复制
if (typeof cmd[key] !== 'function') {
args[key] = cmd[key]
}
})
return args
}
loadCommand
vue-cli/packages/@vue/cli/lib/util/loadCommand.js
主要就是请求
//
module.exports = function loadCommand (commandName, moduleName) {
const isNotFoundError = err => {
return err.message.match(/Cannot find module/)
}
try {
return require(moduleName) // 直接请求
} catch (err) {
if (isNotFoundError(err)) {
try {
return require('import-global')(moduleName) // 全局请求
} catch (err2) {
if (isNotFoundError(err2)) {
const chalk = require('chalk')
const { hasYarn } = require('@vue/cli-shared-utils')
const installCommand = hasYarn() ? `yarn global add` : `npm install -g`
console.log()
console.log(
// 叫用户自己 全局下载下载
` Command ${chalk.cyan(`vue ${commandName}`)} requires a global addon to be installed.\n` +
` Please run ${chalk.cyan(`${installCommand} ${moduleName}`)} and try again.`
)
console.log()
process.exit(1)
} else {
throw err2
}
}
} else {
throw err
}
}
}