前端脚手架基本原理
我们会经常使用脚手架去创建我们的工程，比如用 @vue/ci 创建一个vue项目，我们会执行 vue create myProject来初始化工程，在使用脚手架之前会在全局安装 @vue/cli。
三个问题
1. 为什么全局安装 @vue/cli 后会添加的命令为 vue？
执行 yarn gloabl add @vue/cli 安装好 @vue/cli 后来查找一下 vue 被安装在了哪里？
ps: 不论是用yarn gloabl add 还是 npm i -g 安装，其原理都是大同小异。
huiazir@cuiwenhuideMacBook-Pro ~ % which vue /usr/local/bin/vue 复制代码
在我的电脑中 vue 被安装在了 /usr/local/bin 目录下，进入到这个目录。
huiazir@cuiwenhuideMacBook-Pro ~ % cd /usr/local/bin huiazir@cuiwenhuideMacBook-Pro bin % ll total 144600 drwxr-xr-x 14 root wheel 448 10 28 23:47 . drwxr-xr-x 7 root wheel 224 10 8 23:58 .. lrwxr-xr-x 1 root wheel 50 10 28 23:47 vue -> ../share/.config/yarn/global/node_modules/.bin/vue ..... 复制代码
可以看到 vue 实际上是一个软链接，链接到了../share/.config/yarn/global/node_modules/.bin目录下，进入到这个目录。
huiazir@cuiwenhuideMacBook-Pro bin % cd ../share/.config/yarn/global/node_modules/.bin/ huiazir@cuiwenhuideMacBook-Pro .bin % ll total 0 drwxr-xr-x 3 root wheel 96 10 28 23:47 . drwxr-xr-x 603 root wheel 19296 10 28 23:47 .. lrwxr-xr-x 1 root wheel 22 10 28 23:47 vue -> ../@vue/cli/bin/vue.js 复制代码
这样我们就找到了 vue 是真实路径，在 ../@vue/cli/bin/vue.js，那么为什么全局安装 @vue/cli 后会添加的命令为 vue 呢？ 进入到 vue 的安装目录，查看下 package.json
huiazir@cuiwenhuideMacBook-Pro .bin % cd ../@vue/cli huiazir@cuiwenhuideMacBook-Pro cli % ll total 24 drwxr-xr-x 9 root wheel 288 10 28 23:44 . drwxr-xr-x 10 root wheel 320 10 28 23:44 .. -rw-r--r-- 1 root wheel 1091 10 28 23:44 LICENSE -rw-r--r-- 1 root wheel 106 10 28 23:44 README.md drwxr-xr-x 3 root wheel 96 10 28 23:44 bin drwxr-xr-x 22 root wheel 704 10 28 23:44 lib drwxr-xr-x 7 root wheel 224 10 28 23:47 node_modules -rw-r--r-- 1 root wheel 1707 10 28 23:44 package.json drwxr-xr-x 5 root wheel 160 10 28 23:44 types huiazir@cuiwenhuideMacBook-Pro cli % cat package.json { "name": "@vue/cli", "version": "4.5.14", "description": "Command line interface for rapid Vue.js development", "bin": { "vue": "bin/vue.js" }, // ... } 复制代码package.json中有一个bin 配置项，bin中的配置就是我们在操作系统中安装完成之后软链接的名称。
2. 全局安装 @vue/cli 时发生了什么？
在安装 @vue/cli 后，包会被安装到 /usr/local/share/.config/yarn/global/node_modules中（如果使用 npm 或者其他工具安装则会被安装在对应的目录），包完全安装完成之后，会去解析 package.json 中的 bin，如果发现 bin 下面有这样的一个配置，它就会在 node 的 bin 目录下 添加对应的软链接，这个软链接就会指向我们 bin 中配置的所指向的文件链接。
huiazir@cuiwenhuideMacBook-Pro node_modules % which vue /usr/local/bin/vue huiazir@cuiwenhuideMacBook-Pro node_modules % cd /usr/local/bin huiazir@cuiwenhuideMacBook-Pro bin % ll total 144600 drwxr-xr-x 14 root wheel 448 10 28 23:47 . drwxr-xr-x 7 root wheel 224 10 8 23:58 .. lrwxr-xr-x 1 root wheel 50 10 28 23:47 vue -> ../share/.config/yarn/global/node_modules/.bin/vue huiazir@cuiwenhuideMacBook-Pro bin % 复制代码
3. 执行 vue 命令时发生了什么？
直接执行vue命令和直接执行vue安装目录下面的vue是完全等价的。
huiazir@cuiwenhuideMacBook-Pro ~ % vue -V @vue/cli 4.5.14 huiazir@cuiwenhuideMacBook-Pro ~ % /usr/local/bin/vue -V @vue/cli 4.5.14 huiazir@cuiwenhuideMacBook-Pro ~ % 复制代码
执行
vue命令的第一步其实就是在环境变量中查找vue命令是否被注册，所以我们执行一些没有注册过的命令就会提示command not found。如果命令被注册，就会根据软链接一层一层的去找到其真实的可执行文件
/usr/local/share/.config/yarn/global/node_modules/@vue/cli/bin/vue.js。到这里可能就会有问，我们平时写.js文件要执行node xxx.js去执行，而在这里为什么不写node就可以执行了呢？ 对于js文件来说，想要执行起来就必须需要一个解析器，这个解析器就是node，而我们在执行 vue 的时候，并没有写node，但是却被执行了，那么这个vue.js相比其他的js文件有什么不同呢？
huiazir@cuiwenhuideMacBook-Pro bin % vim vue.js #!/usr/bin/env node // Check node version before requiring/doing anything else // The user may be on a very old node version const { chalk, semver } = require('@vue/cli-shared-utils') // ... 复制代码可以看到第一行有这么一段代码 #!/usr/bin/env node 这也是为什么我们不输入 node 就可以将这个文件执行起来的原因。
#!/usr/bin/env node这段代码的意思就是到环境变量中去找到node命令。 我们可以打印出环境变量
huiazir@cuiwenhuideMacBook-Pro bin % /usr/bin/env TMPDIR=/var/folders/zr/7l4r5c0j5r5c2z9zmgnh_rfc0000gn/T/ __CFBundleIdentifier=com.apple.Terminal XPC_FLAGS=0x0 TERM=xterm-256color SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.dkdt2BPQPi/Listeners XPC_SERVICE_NAME=0 TERM_PROGRAM=Apple_Terminal TERM_PROGRAM_VERSION=440 TERM_SESSION_ID=1FEDBE07-AC77-4CAE-8280-0B703647303E SHELL=/bin/zsh HOME=/Users/huiazir LOGNAME=huiazir USER=huiazir PATH=/usr/local/bin:/usr/local/mongodb/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin SHLVL=1 PWD=/usr/local/share/.config/yarn/global/node_modules/@vue/cli/bin OLDPWD=/usr/local/share/.config/yarn/global/node_modules/.bin.UTF-8 _=/usr/bin/env 复制代码
node 命令就在环境变量PATH当中。找到node之后就会通过node解析器来执行文件。
4. 脚手架执行过程流程图
作者：HuiAzir
链接：https://juejin.cn/post/7037506024634318862
伪原创工具 SEO网站优化 https://www.237it.com/