Lerna脚手架搭建(一)：脚手架简介

一、为什么需要开发脚手架？🤔

核心目标 💪

提升前端研发效能

核心价值 💰

将研发过程：

• 自动化（重复代码拷贝 git 操作 发布上线操作）

• 标准化（项目创建 git flow 发布流程 回滚流程）

• 数据化（研发过程系统化、数据化，使得研发过程可量化）

研发架构图 🎨

二、脚手架简介📖

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

vue create vue-test-app

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

• 主命令：vue

• command：create

• command 的 param：vue-test-app

此命令表示创建一个 vue 项目，项目的名称为 vue-test-app.

---

🍅以上是一个较为简单的脚手架命令，但实际场景往往更加复杂，比如：

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

vue create vue-test-app --force

这里的 --force 叫做 option，用来辅助脚手架确认在特定场景下用户的选择。

可以理解为配置

---

🍅还有一种场景：通过 npm 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

三、脚手架执行原理😋

脚手架的执行原理如下：

• 在终端输入 vue create vue-test-app

• 终端解析出 vue 命令

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

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

• 终端利用 node 执行 vue.js

• vue.js 解析 command / options

• vue.js 执行 command

• 执行完毕，退出执行

四、脚手架实现原理👈

如果你能回答一下 3 个问题，就掌握了脚手架的实现原理：

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

在 package.json 当中 bin 定义的

❓ 全局安装 @vue/cli 时发生了什么？

1. 把依赖下载到 node_modules 内

2. 创建软连接

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

操作系统根据 which vue 找到文件路径

五、脚手架和自动化构建工具区别？🤔

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

• 不满足需求：jenkins、travis 通常在git hooks中触发，需要在服务端执行，无法覆盖研发人员本地的功能，如：创建项目自动化、本地 git 操作自动化等

• 定制复杂：jenkins、travis 定制过程需要开发插件，其过程较为复杂，需要使用 java 语言，对前端开发人员不够友好

六、脚手架架构设计图 👈

简化版

详细版

七、扩展 👈

一下两种写法的区别

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

• 第一种是在环境变量中查找 node

• 第二种是直接执行 /usr/bin/ 目录下的 node