【Javascript】脚手架的实现原理
学习环境:MAC OS
脚手架的实现原理
如果您能回答以下问题,就掌握了脚手架的实现原理:
- 为什么全局安装
@vue/cli
后会添加的命令为vue
?
npm install -g @vue/cli
这是因为在\node_global\node_modules\@vue\cli\package.json
有如下配置:"bin": {"vue": "bin/vue.js"}
。
全局安装
@vue/cli
时发生了什么?- 下载依赖到
\node_global\node_modules
目录 node/bin
新增软链接:vue
->\node_global\node_modules\@vue\clibin\vue.js
- 下载依赖到
执行
vue
命令时发生了什么?在环境变量中寻找
vue
,如果存在则执行,不存在则报错。为什么
vue
指向一个js
文件,我们却可以直接通过vue
命令去执行它?node/bin
目录中存在vue
软链接指向实际的入口 js 文件。入口文件头部声明了解释器#!/usr/bin/env node
且 可以在环境变量中找到node
命令。所以当我们运行 vue 命令时,相当于是执行了node \node_global\node_modules\@vue\clibin\vue.js
脚手架原理进阶
- 为什么说脚手架本质是操作系统的客户端?它和我们在 pc 上安装的应用有什么不同?
我们编写的 js 文件实际是作为 nodejs 参数传入执行的,而 nodejs 是客户端,所以说脚手架本质是操作系统的客户端。
它和我们在 pc 上安装的应用本质上是一样的,只是 nodejs 没有 GUI。
- 如何为 node 脚手架创建别名?
新建一个软链接指向 node 脚手架的软链接。
软链接是可以嵌套的!
描述脚手架命令执行的全过程。
- 用户输入
vue create vue-test-app
在环境变量
$PATH
中查询Vue
命令(相当于执行which vue
)- 查询失败,输出错误信息
- 查询成功,寻找实际链接文件
通过
/usr/bin/env node
执行文件- node 命令查询失败,输出错误信息
- 执行成功
- 用户输入