脚手架架构设计和框架构建
前端开发脚手架的必要性
研发效能
开发脚手架的核心目的是提升前端研发效能。
目标研发架构图：
我们可以看到，三大部分的人工操作其实可以封装在脚手架工具内，实现自动化，提升效能。
脚手架核心价值
- 自动化：项目重复代码拷贝/git操作/发布上线操作
- 标准化：项目创建/git flow/发布流程/回滚流程
- 数据化：研发过程系统化、数据化，使得研发过程可量化
和自动化构建工具的区别
jenkins等自动化构建工具已经非常成熟了，为什么我们还要自研脚手架呢？
- 需求不满足：jenkins 等工具通常是在 git hooks 中触发，只能在服务端自动化，对开发人员本地的自动化需求无法解决，例如：
- 创建项目自动化
- 本地 git 操作自动化
- 定制复杂：jenkins 等定制都是通过开发插件完成的，过程复杂，而且基本是 java 开发，对前端来说学习成本过高
理解脚手架
脚手架简介
脚手架的本质是一个操作系统的客户端，它通过命令执行，例如：
vue create vue-test-app
上面的命令由三部分组成：
- 主命令：
vue - command：
create - 参数：
vue-test-app
这条命令表示创建一个 vue 项目，项目名称为vue-test-app，这只是一个基础命令，还有更复杂的，例如：
当前已经存在该目录，我们想要覆盖该目录下的文件，此时我们可以使用命令：
vue create vue-test-app --force
这个命令的 --force 叫做option，用来辅助脚手架确认在特定场景下的用户选择（配置）。再举一个例子：
vue create 命令在创建项目后，会自动安装依赖，如果我们想使用淘宝作为依赖源，我们可以：
vue create vue-test-app --force -r htts://registry.npm.taoabo.org
我们可以看到 -r 和--force 的区别：
- 一个
- r是一个缩写
因此我们也可以用下面这个命令来代替：
vue create vue-test-app --force -registry htts://registry.npm.taoabo.org
每个脚手架都有独自定义的命令、参数和 option，但是我们总有一个办法可以让我们查看脚手架具体的使用命令，例如：
vue create --help
脚手架的执行原理
- 在终端输入
vue create vue-test-app - 终端解析出
vue命令 - 终端在环境变量下找到
vue命令 - 终端找到环境变量对应的实际文件
vue.js - 终端利用
ndoe执行vue.js vue.js解析command、参数、option等等vue.js执行command- 执行完毕，结束
从应用层面了解脚手架
之前也提到了，脚手架的本质就是操作系统的一个客户端，因此从应用层来讲，基本就是两个步骤：下载、执行；
以 vue-cli 为例：
- 开发
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 - 全局安装
@vue/cli时发生了什么 - 为什么
vue指向一个js文件，却能直接执行它（而不需要显示的使用node 或其他命令）
这个更深入的问题，我们在下一章“脚手架原理”中会解释。
脚手架原理
以vue-cli为例，我们看看脚手架的实现原理。
vue命令为什么可以被执行
我们在全局安装了 @vue/cli 后，为什么可以使用 vue 命令使用脚手架？
我们先看现象：
which vue
// /usr/local/bin/vue
cd /usr/local/bin
ll
我们进入 /usr/local/bin 这个目录，可以看到 vue 实际是一个软连接，它指向了一个可执行的文件。（linux 的 bin 目录一般用来存储可执行文件）。
我们进入到实际执行文件文件夹下，我们可以看到有一个 package.json 文件，我们进去看看：
"bin": {
"vue": "bin/vue.js"
},
这个配置实际上就是我们的系统能建立这个软连接的原因。
全局安装 @vue/cli 时发生了什么
- npm下载包到本地 node 文件下的 node_modules 里面
- 解析包中 package.json 中的配置，设置软链接
执行 vue 命令的时候发生了什么
为什么实际可执行文件是一个 js 文件，但是我们却可以直接用 vue 命令执行它？而不是使用 node 命令？
我们可以进入到实际执行文件中看看代码：
#!/usr/bin/env node
这是文件的第一行，系统在读取这个文件的时候，它指定了系统用环境变量下的哪个命令来执行它，因此我们不用显示的使用 node 来执行这个文件。
使用环境变量的原因
如果是指定某个文件的路径，不同机器间可能应为目录结构不同，而导致找不到这个可执行文件，而环境变量的存储位置是固定的。
如何创建软连接
# 查看当前环境变量echo $PATH# 设置环境变量软链接ln [实际执行文件] [环境变量名称]
为什么说脚手架本质是个操作系统客户端
其实我们上面可以看到，实际上脚手架只是提供了一个 js 文件，还是需要通过 node 来执行，因此我们说的客户端其实指的是 node。
