前端反卷计划-脚手架-原理介绍

核心目标

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

脚手架核心价值

将研发过程：
1.自动化：项目重复代码拷贝/git操作/发布上线操作
2.标准化：项目创建/git flow/发布流程/回滚流程
3.数据化：研发过程系统化，数据化，使得研发过程可量化

和自动化构建工具区别

问题：jenkins, travis等自动化构建工具已经比较成熟了，为什么还需要自研脚手架？
1.不满足需求：jenkins,travis通常在git hooks中触发，需要在服务端执行，无法覆盖研发人员本地的功能，如：创建项目自动化，本地git操作自动化等。
2.定制复杂：jenkins, travis 定制过程需要开发插件，其过程较为复杂，需要使用java语言，对前端同学不够友好

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

脚手架简介

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

vue create vue-test-app

上面这条命令由3个部分组成：
1.主命令：vue
2.command：create
3.command的param：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

脚手架执行原理

脚手架的执行原理如下：
1.在终端解析 vue create vue-test-app
2.终端解析出 vue命令
3.终端在环境变量中找到 vue命令
4.终端根据 vue 命令链接到实际文件 vue.js
5.终端利用 node 执行 vue.js
6.vue.js 解析 command/options
7.vue.js 执行 command
8.执行完毕，退出执行

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

以 vue-cli 为例
1.开发 npm 项目，该项目中应包含一个 bin/vue.js 文件，并将这个项目发布到 npm
2.将 npm 项目 安装到 node 的 lib/node_modules
3.在 node 的 bin 目录下配置 vue 的软连接指向 lib/node_modules/@vue/cli/bin/vue.js
这样在执行 vue 命令的时候就可以找到 vue.js 进行执行。

脚手架的实现原理

1.为什么全局安装 @vue/cli 后添加的命令为vue?
2.全局安装 @vue/cli 时发生了什么？
3.执行 vue命令时发生了什么？为什么 vue指向了一个 js文件 ，我们却可以通过 vue 命令去执行它?

脚手架原理进阶

1.为什么说脚手架本质是操作系统的客户端？
本质是node是操作系统，通过 node -e 来解析js文件
2.如何为node 脚手架创建别名？
创建软连接：ln -s /a.js 别名
3.描述脚手架命令执行的全过程
1.用户在终端输入 vue create vue-test-app
2.终端会在 $PATH 查询 vue 命令。相当于执行 which vue
3.查询实际链接文件
4.通过 /usr/bin/env node 执行文件