随着前端工程化工具的兴起,日常的开发中大家也很少会直接html
,js
,css
一把梭哈去开发,都是使用前端框架配合对应的脚手架来初始化一个项目,比如vue
的vue-cli
,react
的create-react-app
等。我们只需要全局安装一下这些脚手架,然后输入vue create name
或者create-react-app name
就可以很方便的去初始化一个对应的项目。那你有想过安装完脚手架后这些命令背后都做了哪些事吗?
以vue-cli
为例,首先我们先全局安装vue-cli
:
npm install -g @vue/cli
安装成功后,通过vue -V
查看版本,证明安装成功,并且有了全局的vue
命令。打开终端,输入which
查看vue命令对应的可执行文件所在路径:
$ which vue
/usr/local/bin/vue
查看bin目录下vue
文件对应的信息:
ls -l /usr/local/bin/ | grep vue
lrwxr-xr-x 1 xxx admin 39 Sep 27 2018 vue ->../lib/node_modules/@vue/cli/bin/vue.js
我们发现这里的vue
只是一个软连接,真实的文件指向这里../lib/node_modules/@vue/cli/bin/vue.js
。好的,剥茧抽丝,我们继续去找这个可执行文件:
ls /usr/local/lib/node_modules/@vue/cli/bin
vue.js
Bingo!就是它!也就是说我们在全局执行的vue
命令就是在执行这个vue.js
。可是你该问了,这明明是个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 = require('chalk')
const semver = require('semver')
......
奥秘就在第一行:#!/usr/bin/env node
,有兴趣的可以看看什么是Sha-Bang。简单的说这句话就是指定这个vue.js脚本的执行使用node
作为解释器。也就是说加了这一句话,你可以直接通过./vue.js
的方式直接执行这个js
脚本,效果跟node vue.js
是一样的。
可是细心的你还有一个问题,为什么我安装的是@vue/cli
,但是注册的命令却是vue
呢?其实这个我们来看一下@vue/cli
的package.json
就知道了:
{
"name": "@vue/cli",
"version": "3.8.2",
"description": "Command line interface for rapid Vue.js development",
"bin": {
"vue": "bin/vue.js"
}
......
}
这里面通过bin指定了可执行文件的命令名以及可执行文件的路径,npm
安装一个依赖时,如果该依赖的package.json
中指定了bin
的信息,那么同时会创建一个全局的软连接指向该命令所对应的可执行文件。有兴趣的可以看看npm
的官方文档:package.json中bin的作用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。