02-2.4 脚手架的实现原理

脚手架实现原理

学习脚手架实现原理前的3个问题：

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

npm install -g @vue/cli

• 全局安装@vue/cli时发生了什么？
• 执行vue命令时发生了什么？为什么vue指向一个js文件，我们却可以直接通过vue命令去执行它？

脚手架原理进阶

掌握问题的答案后，我们继续深入：

• 为什么说脚手架本质是操作系统的客户端？它和我们在PC上安装的应用/软件有什么区别？
• 如何为node脚手架命令创建别名？
• 描述脚手架命令执行的全过程

拓展

以下两种写法的区别

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

• 第一种是在环境变量中查找node
• 第二种是直接执行/usr/bin/目录下的node

---

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

首先，全局安装@vue/cli，然后找到它的安装路径，以windows7为例，它的路径可能是C:\Users\yourname\AppData\Roaming\npm\node_modules\@vue\cli，Mac的安装路径可能是/Users/yourname/.nvm/versions/node/v14.18/lib/node_modules/@vue/cli/。打开@vue/cli项目的package.json文件，你能发现下面这个属性配制：

"bin": {
   
	"vue": "bin/vue.js"
}

通过npm install -g @vue/cli的时候，会自动将bin属性配制到环境变量当中，也就是说生成了vue命令，并指向该目录下的bin/vue.js文件

揭开庐山真面目：vue其实是一个可执行的js文件而已。

技巧：

• 可以通过which vue命令来查找vue命令的路径
• 通过ll /c/Users/loushengyue/AppData/Roaming/npm/查看windows7系统的node可执行文件列表，在windows上vue将以快捷方式的形式存在
• 同样的，在Mac上，vue是一个映射，它指向真实存放的vue.js可执行文件

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

安装@vue/cli的时候，系统会将项目package.json中的bin属性拓展到电脑的环境变量当中，即根据该配置自动将其设置为可执行文件。

技巧：

• 通过ll命令可以查看文件的权限，如果不清楚什么是文件读写权限，那么你不适合学习该课程
• 另外可执行文件首行代码#!/usr/bin/env node表示通过node来执行该文件

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

执行vue命令其实就是通过node脚手架去执行类似node @vue/cli/vue.js的命令，这里省略了node命令而直接用vue命令是因为@vue/cli/vue.js文件首行添加了#!/usr/bin/env node解析说明，同时该文件的读写权限是一个可执行文件，所以最终都是指向@vue/cli/vue.js文件的。

技巧：

• 可以自己创建一个test.js文件，通过chmod 777 -R test.js将其修改为可执行文件
• 文件首行添加#!/usr/bin/env node，顺便来一句代码console.log("hello word.")
• 然后通过终端执行./test.js查看结果是否输出“hello word.”

提示：/usr/bin/env node test.js 、node ./test.js、./test.js在上述情况中是等效的。

为什么说脚手架本质是操作系统的客户端？它和我们在PC上安装的应用/软件有什么区别？

无论是自定义的可执行文件test.js还是@vue/cli/vue.js，最终都是通过node脚手架去执行的，而node命令指向的是操作系统（windows）的客户端node.exe，所以本质上可以理解为操作系统的客户端，同样的node脚手架也是客户端；他们与PC上安装的其他应用/软件的区别只是没有UI界面而已。

提示： windows的客户端都是xxx.exe文件，而Mac系统则是xxx.xx可执行文件即可

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

通过ln命令即可创建别名，案例：

ln -s /c/Program Files/nodejs/node node-test

就得到了node-test别名

**提示：**假如你还不知道ln命令，请自行科普补充（无非是Linux系统下创建软/硬连接的一个命令）

• 软链接：创建的文件/目录名称->储存着目标文件/目录的“绝对路径”，可以理解为windows系统的快捷方式
• 硬链接：只能创建文件硬链接，它与目标文件共用同一个文件inode，所以删除硬链接的时候，不会删除原始文件，只有当所有的引用都被删除了才会删除inode指向存储信息

描述脚手架命令执行的全过程