前端脚手架是如何工作的呢？

随着前端工程化工具的兴起，日常的开发中大家也很少会直接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的作用。