从0开发一个高性能前端脚手架-第二篇-脚手架执行原理

脚手架执行原理

脚手架的执行原理如下：

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 执行文件

脚手架开发流程

开发流程

1.创建 npm 项目

2.创建脚手架入口文件，最上方添加：

#!/usr/bin/env node

3.配置 package.json ，添加 bin 属性

4.编写脚手架代码

5.将脚手架发布到 npm

使用流程

1.安装脚手架

npm install -g your-cli

2.使用脚手架

your-cli