脚手架原理

1 minute read

为什么全局安装 @vue/cli 会可以使用vue进行建项目?

➜  ~ npm i -g @vue/cli
➜  ~ which vue
/Users/liuyan/.nvm/versions/node/v14.16.0/bin/vue
# bin 代表可执行文件


➜  ~ cd /Users/liuyan/.nvm/versions/node/v14.16.0/bin && ll
total 144600
lrwxr-xr-x  1 liuyan  staff    39B  7  4 19:10 vue -> ../lib/node_modules/@vue/cli/bin/vue.js
// lrwxr头部的l代表软链接
// 执行vue后,实际实行的是../lib/node_modules/@vue/cli/bin/vue.js 文件


➜  bin git:(e1c84ba) ✗ cd ../lib/node_modules/@vue/cli
➜  cli git:(e1c84ba) ✗ ls
LICENSE      README.md    bin          lib          node_modules package.json types
➜  cli git:(e1c84ba) ✗ vim package.json

找到bin这个属性,根据 npm 文档 bin 的解释说明,该字段用于命令名与本地执行文件的映射。执行vue,实际是去执行@vue/cli文件夹下的bin/vue.js

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

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

1、将包文件下载到/Users/liuyan/.nvm/versions/node/v14.16.0/lib/node-modules下 2、解析package.json中的bin,若发现有bin相关的配置,会到/Users/liuyan/.nvm/versions/node/v14.16.0/bin下创建一个软链接 命令名称 -> 具体执行的文件

执行vue命令时发生了什么,为什么可以通过vue去执行这个文件

1、执行 vue 命令时,变相的是执行 /Users/liuyan/.nvm/versions/node/v14.16.0/bin/vue,同时是去实行了package.json中bin指向的真实文件。 2、本身js若是没有解释器是无法被运行的。

➜  suibu touch test.js
➜  suibu test.js
zsh: command not found: test.js

所以要在文件中写入

#!/usr/bin/env node
console.lgo('bili')

/usr/bin/env 是所有的环境变量,在 NVM_BIN=/Users/liuyan/.nvm/versions/node/v14.16.0/bin中就有node命令 如果在文件中写入#!/usr/bin/env node,等价于 node test.js

创建一个全局命令

1、找到电脑中所有的环境变量

➜  suibu echo $PATH

/Users/liuyan/.gem/ruby/2.6.0/bin:~/.composer/vendor/bin:/Users/liuyan/.nvm/versions/node/v14.16.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

2、在这些环境变量中创建软链接

➜  suibu cd /Users/liuyan/.nvm/versions/node/v14.16.0/bin

# 创建软链接
➜  bin git:(e1c84ba) ✗ ln -s /Users/liuyan/suibu/test.js suibu-command
➜  bin git:(e1c84ba) ✗ ll
total 144600
lrwxr-xr-x  1 liuyan  staff    27B  7  4 20:08 suibu-command -> /Users/liuyan/suibu/test.js

然后随便找个路径执行它

➜  ~ /Users/liuyan/suibu/test.js
zsh: permission denied: /Users/liuyan/suibu/test.js
# 若是告诉你没有权限访问:敲入命令 chmod 去添加可执行权限
➜  ~ cd /Users/liuyan/suibu && chmod 777 test.js

如何给本地脚手架取别名

➜  ~ which vue
/Users/liuyan/.nvm/versions/node/v14.16.0/bin/vue
➜  ~ /Users/liuyan/.nvm/versions/node/v14.16.0/bin
➜  bin git:(e1c84ba) ✗ ll
total 144600
lrwxr-xr-x  1 liuyan  staff    39B  7  4 19:10 vue -> ../lib/node_modules/@vue/cli/
➜  bin git:(e1c84ba) ✗ ln -s ./vue vue2
➜  bin git:(e1c84ba) ✗ ~
➜  ~ vue2
Usage: vue2 <command> [options]

在命令行窗口敲入vue create vue-test-app后,OS做了什么?

1、去$PATH寻找有没有你输入的命令,等价于:which vue 2、若找到了相关的软链接,便找到实在的lib/可执行文件 3、通过解释器node去执行lib/**.js

本地调试脚手架

npm link 将当前项目链接到node全局 node_modules 中作为一个库文件,并解析bin配置,创建软链 npm unlink 移除上述软链

npm link 库名 将当前项目中 node_modules指定的库名链接到node全局node_modules下的库文件 npm unlink 库名 移除本项目中对该库的软链

脚手架拆包策略

SuiBu

SuiBu

Engineer

Comments

  Write a comment ...