前端架构 —— 脚手架架构设计和框架搭建

一、前端研发开发脚手架的必要性

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

大厂研发架构图

脚手架核心价值：

将研发过程：

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

和自动化构建工具区别

问题:jenkins、travis等自动化构建工具已经比较成熟了，为什么还需要自研脚手架?

• 不满足需求:jenkins、travis通常在git hooks中触发，需要在服务端执行，无法覆盖研发人员本地的功能,如:创建项目自动化、本地git操作自动化等
• 定制复杂:jenkins、travis定制过程需要开发插件，其过程较为复杂，需要使用ava语言，对前端同学不够好

二、从使用角度理解脚手架

1、脚手架简介

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

vue create vue-test-app

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

• 主命令:vue
• command:create
• command的param:yue-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.com

 这里的 -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

2、脚手架的执行原理

 

• 在终端输入 vue create vue-test-app
• 终端解析出 vue 命令
• 终端在环境变量中找到 vue 命令
• 终端根据 vue 命令链接到实际文件 vue.js
• 终端利用 node 执行 vue.js
• vue.js 解析 command/options
• vue.js 执行 command
• 执行完毕，退出执行

3、从应用的角度开发一个脚手架

• 开发 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.js，真正执行的就是这个vue.js文件；

在vue-cli的项目文件下的package.json里面的bin，配置了指向系统中bin目录下的vue.js文件

在全局安装vue-cli后，会把依赖下载到node_modules中，并且会在bin目录下创建一个vue@的软链接

执行 vue 命令时其实是在系统环境变量中找到 vue 命令有没有被注册

在命令行中是无法直接执行js的，因为js必须通过解析器进行执行，这个解析器就是node，例如：

node ./demo.js

而 vue 为何能在命令行中直接执行呢，是由于源码中有这么一段代码

Mac：

#!/usr/bin/env node

这句话的作用是在调用文件时，到环境变量中找到 node 命令，通过 node 命令执行后面的内容

使用 ./xxx 执行不够美观，若想像执行 vue 命令一样，使用自定义命令去执行指定文件，可以这么做：

找到 node 的bin目录，在目录中创建一个软链接，并指向指定的文件

MacBook：

ln -s /Users/sam/Desktop/vue-test/test.js testName

Windows：

手动右键新建一个快捷方式

 四、脚手架原理进阶

脚手架本质是操作系统的客户端，准确来说node才是操作系统的客户端，脚手架是node执行的参数，本质上跟在PC上安装的应用/软件没有区别

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

可以创建软链接指向指定的文件执行

还可以修改已存在的别名

ln -s ./xxx.js testName2

以下是脚手架命令执行的全过程