通过四个问题去掌握脚手架的实现原理

date

Jul 13, 2022

slug

status

Published

npm instal -g @vue/cli

通过wich vue可以查看命令的位置

➜  ~ which vue
/Users/luxi/.nvm/versions/node/v17.7.2/bin/vue

进入/Users/luxi/.nvm/versions/node/v17.7.2/bin路径，通过ll查看文件属性

进入/Users/luxi/.nvm/versions/node/v17.7.2/lib/node_modules/@vue/cli/ 路径，查看package.json。

{
	...

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

	...
}

说明安装@vue/cli会在bin路径创建一个命名为vue的文件指向bin/vue.js

首先在node的全局依赖路径/Users/luxi/.nvm/versions/node/v17.7.2/lib/node_modules安装@vue/cli。（也有可能在/usr/lib/路径下）

解析@vue/cli包内的package.json文件下bin的配置。如果发现bin有配置。会在node的bin目录（/Users/luxi/.nvm/versions/node/v17.7.2/bin）下创建一个相应的软链接，在这里是vue → bin/vue.js。

{
	...

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

	...
}

在问题1中已经说明了当我们执行vue命令时，操作系统会在环境变量中查找vue命令对应的可执行文件。我们通过which vue也可以找到vue所指向的可执行文件。

一般情况下我们是无法直接执行js文件。

➜  Desktop ./test.js
zsh: permission denied: ./test.js

提示权限拒绝，通过ll指令可以查看test.js文件的权限

➜  Desktop ll | grep test.js
-rw-r--r--   1 luxi  staff    30B Jul 13 22:07 test.js

可以看到test.js文件不是一个可执行文件，我们通过chmod指令来修改它的权限。

➜  Desktop chmod 777 test.js
➜  Desktop ll | grep test.js
-rwxrwxrwx   1 luxi  staff    30B Jul 13 22:07 test.js

这时候我们执行一下test.js文件

➜  Desktop ./test.js
./test.js: line 1: syntax error near unexpected token `'hello, world!!''
./test.js: line 1: `console.log('hello, world!!')'

同样是无法执行，为什么呢？因为平时我们执行js文件都是通过js的解释器去执行。例如node就是一个js的解释器。

那么为什么vue命令指向一个js文件却可以直接执行？

我们通过查看一下vue.js文件。

在Unix中，凡是被#!注释的，统统是加载器（解释器）的路径。

而在vue.js文件的首行就是#!/usr/bin/env node。它的意思就是在系统环境变量中找node这个程序作为文件的解释器。所以我们执行vue命令时，其实就相当于执行node vue.js。

两者有什么区别？

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