「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

脚手架本质是一个操作系统的客户端，市面上有一些框架库通用的脚手架，但是想订制符合公司要求的脚手架，还是要自研的。

1. 站在前端研发的视角，分析开发脚手架的必要性

研发效能

脚手架的核心目标是：提升前端研发效能

大厂研发架构图

脚手架核心价值

将研发过程：

自动化：项目重复代码拷贝/git操作/发布上线操作
标准化：项目创建/git flow/发布流程/回滚流程

数据化：研发过程系统化、数据化，使得研发过程可量化

和自动化构建工具的区别

问题：Jenkins、Travis等自动化构建工具已经比较成熟了，为什么还需要自研脚手架？

不满足需求：Jenkins、Travis通常在git hooks中触发，需要在服务端执行（仅仅只能覆盖云构建端的操作），无法覆盖研发人员本地的功能，如：创建项目自动化，本地git操作自动化等
定制复杂：Jenkins、Travis定制过程需要开发插件，其过程较为复杂，需要使用java语言，对前端同学不够友好

2. 从使用角度理解什么是脚手架

脚手架简介

脚手架本质是一个操作系统的客户端，它通过命令执行，比如：

vue create vue-test-app

上面命令由3个部分组成：

主命令：vue
command：create 子命令

command的params：vue-test-app 参数

他表示创建一个vue的项目，项目的名称为vue-test-app，以上是一个较为简单的脚手架命令，但实际场景往往更加复杂，比如：

当前目录已经有文件了，我们需要覆盖当前目录下的文件，强制进行安装vue项目，此时我们就可以输入

vue create vue-test-app --force

这里的--force叫做option，用来辅助脚手架确定在特定场景下用户的选择（可以理解为配置）。还有一种场景：

通过 vue create 创建项目时，会自动执行 npm install 帮用户安装依赖，如果我们希望使用淘宝源来安装，可以使用命令：

vue create vue-test-app --force -r https://registry.npm.taobao.org

这里的-r也叫做option，它与 --force 不同的是它使用-，并且使用了简写，这里的 -r 也可以替换成--registry，如果不知道vue create支持的所有options，可以使用：

vue create --help

-r https://registry.npm.taobao.org 后面的 https://registry.npm.taobao.org成为option的param，其实 --force 可以理解为：--force true，简写为：--force 或 -f

3. 脚手架执行原理

输入vue create vue-test-app 终端做了什么

脚手架的执行原理如下：

在终端输入 vue create vue-test-app
终端解析出 vue 命令

终端在环境变量中找到 vue 命令

- 在终端中找到vue命令的方法：which vue

终端根据vue命令链接到实际文件 vue.js

- 找到vue(软链接),找到vue.js

终端利用node执行 vue.js
vue.js 解析command/options

vue.js 执行command/options
执行完毕，退出执行

4. 从应用角度看如何开发一个脚手架

这里以 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 进行执行

5. 还有很多疑问需要解答

为什么全局安装@vue/cli后会添加的命令为vue?

npm install -g @vue/cli

答：在/usr/local/lib/node_modules/@vue/cli文件夹下的package.json的

"bin":{ // 配置软链接
  "vue": "bin/vue.js"
}

这个软连接的名称就是vue，所以添加后的命令为vue

全局安装`@vue/cli`时发生了什么?

先把 @vue/cli 下载到 /usr/local/lib/node_modules 中，
然后解析 @vue/cli 下的 package.json，

根据 bin 中的定义去 /usr/local/bin/ 下去定义 @vue/cli 的软连接 vue

执行vue发生了什么？为什么`vue`指向一个`js`文件，我们却可以直接通过`vue`命令直接去掉行它?

终端在环境变量中找vue指令（相当于which vue命令），看有没有被注册，未注册则返回command not found,
注册了则去找vue指令软连接指向的地址/usr/local/lib/node_modules/@vue/cli/bin/vue.js，去执行vue.js文件中的代码

因为这个js文件的顶部写了#!/usr/bin/env node,标识在环境变量中查找node，告诉系统使用node去执行这个js文件

6.脚手架原理进阶

1. 为什么说脚手架本质是操作系统的客户端？它和我们在PC上安装的应用/软件有什么区别？

1.node在window中是一个node.exe，在Mac中是一个可执行文件（node*）,因为node是操作系统的一个客户端，脚手架的本质是通过node去执行js文件，所以也可以说脚手架的本质是操作系统的客户端。

2.本质来说没有区别，PC安装的应用只是提供了一个GUI，脚手架是通过命令的形式

2. 如何为node脚手架命令创建别名？

进入/usr/local/bin目录

ln -s ./imooc-test-cai imooc-test-cai2

3. 描述脚手架命令执行的全过程。

扩展一下，有的同学可能会问下面两种写法的区别?

#!/usr/bin/env node
#!/usr/bin/node

第一种是在环境变量中查找node (推荐使用这种方法)
第二种是直接执行/usr/bin/目录下的node

脚手架开发-实现原理