一、站在前端研发的视角，分析开发脚手架的必要性
研发效能
- 开发脚手架的核心目标是：提升前端的研发效能
- 大厂研发一定需要用到脚手架
脚手架核心价值
将研发过程：
- 自动化：项目重复代码拷贝/git 操作/发布上线操作
- 标准化：项目创建/git flow/发布流程/回滚流程
- 数据化：研发过程系统化、数据化，使得研发过程可量化
和自动化构建的区别
问题：jenkins、Travis 等自动化构建工具已经比较成熟了，为什么还需要自研脚手架？
- 不满足需求：jenkins，Travis 通常在 git hooks 中触发，需要在服务端执行，无法覆盖研发人员本地的功能：如创建项目自动化、本地 git 操作自动化等、
- 定制复杂：jenkins、Travis 定制过程需要开发插件，其过程较为复杂，需要使用 java 语言，对前端同学不友好
二、从使用角度理解什么是脚手架?
脚手架简介
脚手架本质是一个操作系统的客户端，它通过命令行执行，比如：
vue create vue-test
上面这条命令由 3 个部分组成：
- 主命令：vue
- command（子命令）：create
- command 的 param：vue-test
它表示创建一个 vue 项目，项目名称为 vue-test，以上是最简单的脚手架命令，但实际场景往往更加复杂，比如： 当前项目已经有文件，我们需要覆盖当前目录下的文件，强制进行安装vue项目，此时我们就可以输入
vue create vue-test --force
这里的–force 叫做 option，用来辅助脚手架确认在特定场景下用户的选择（可以理解为配置）。还有一种场景：通过vue create创建项目时，会自动执行npm install帮助用户安装依赖，如果我们希望使用淘宝源来安装，可以输入命令：
vue create vue-test --force -r https://registry.npm.taobao.org
这里的 -r 也叫做 option，它与--force不同的是它使用 -,并且使用简写，这里的-r也可以替换成-- registry,我们可以通过帮助命令看到vue create支持的所有 options:
vue create --help
脚手架执行原理
- 终端输入
vue create vue-test - 终端解析出
vue命令 - 终端在环境变量中找到
vue命令（相当于执行 which vue） - 终端根据
vue命令链接到实际文件vue.js - 终端利用
node执行vue.js vue.js解析 command/optionsvue.js执行 command- 执行完毕，退出执行
which vue
// /c/Users/lkjjhj/AppData/Local/Yarn/bin/vue
从应用的角度看如何开发一个脚手架
- 开发
npm项目，该项目中应包含一个bin/vue.js文件，并将这个项目发布到npm - 将
npm项目安装到node的lib/node_modules - 在
node的bin目录下配置vue软链接指向lib/node_modules/@vue/cli/bin/vue.js这样我们在执行vue命令的时候就可以找到vue.js进行执行
还有疑问需要解答
- 为什么全局安装
@vue/cli后会添加的命令为vue?
npm install -g @vue/cli
- 全局安装
@vue/cli时发生了什么？* 为什么vue指向一个 js 文件，我们却可以通过vue命令去执行它？三、脚手架的实现原理
==========
脚手架实现原理
如果你能回答以下 3 个问题，就掌握了脚手架的实现原理：
- 为什么全局安装
@vue/cli后会添加命令为vue?
npm install -g @vue/cli
答：在 package.json 中配置 bin
"bin": {"vue": "bin/vue.js"
}
- 全局安装
@vue/cli时发生了什么？ 答：下载依赖，并配置 bin 命令* 执行vue命令时发生了什么？为什么vue指向一个js文件，我们却可以直接通过vue命令去执行它？脚手架原理进阶
我们继续尝试回答以下 2 个问题？
- 为什么说脚手架本质是操作系统的客户端？它和我们在 PC 上安装的应用/软件有什么区别?* 如何为
node脚手架命令创建别名？ 通过软链接创建别名* 描述脚手架命令执行的全过程。```
#!/usr/bin/env node// 在环境变量中查找node
#!/usr/bin/node// 直接执行 usr/bin 目录下的 node
四、脚手架的开发流程
==========
脚手架开发流程详解
---------
### 开发流程
* 创建`npm`项目
* 创建脚手架入口文件，最上方添加：
#!/usr/bin/env node
* 配置`package.json`,添加`bin`属性
* 编写脚手架代码
* 将脚手架发布到 npm
### 使用流程
* 安装脚手架
npm install -g best-cli
* 使用脚手架
best - cli;
脚手架开发难点解析
---------
* 分包：将复杂的系统拆分成若干模块* 命令注册：```
vue create
vue add
vue invoke
- 参数解析：
vue command [options] <params>
- options 全称：
--version、--help - options 简写：
-V、-h - 带 params 的 options：
--path /User/xxx/vue-test - 帮助文档：
Usage: vue <command> [options]
Options:-V, --versionoutput the version number-h, --help output usage information
Commands:create [options] <app-name>create a new project powered by vue-cli-serviceadd [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created projectinvoke [options] <plugin> [pluginOptions]invoke the generator of a plugin in an already created projectinspect [options] [paths...] inspect the webpack config in a project with vue-cli-serviceserve [options] [entry]serve a .js or .vue file in development mode with zero configbuild [options] [entry]build a .js or .vue file in production mode with zero configui [options] start and open the vue-cli uiinit [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init)config [options] [value] inspect and modify the configoutdated [options] (experimental) check for outdated vue cli service / pluginsupgrade [options] [plugin-name](experimental) upgrade vue cli service / pluginsmigrate [options] [plugin-name](experimental) run migrator for an already-installed cli plugininfo print debugging information about your environmentRun vue <command> --help for detailed usage of given command.
- 命令行交互
- 日志打印
- 命令行文字变色
- 网络通信：HTTP/WebSocket
- 文件处理
- 等等…
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。