脚手架系列

脚手架运行原理都是一样的，分为安装和使用。

我们以vue-cli为例，首先全局安装 npm install -g @vue/cli，再使用 vue create demo 创建项目

全局安装 `npm install -g @vue/cli` 时发生了什么？

首先我们要清楚，能在命令行中识别的命令，一定是要在环境变量中能找到，所以当我们安装nodejs后，会在电脑环境变量中增加nodejs命令目录，默认是 C:/Program Files/nodejs

下载项目和依赖包到全局 node_modules 中

下图就是@vue/cli项目的代码

读取package.json的bin字段创建可执行文件指向一个js文件

这句就会在nodejs目录下创建 vue 文件名的可执行文件，文件里内容指向 bin/vue.js

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

在环境变量中找到vue可执行文件

which vue 可找到环境变量中命令

@vue\cli\bin\vue.js文件的首行是#!/usr/bin/env node指定用node解析文件

vue create demo 就变为执行 C:\Program Files\nodejs\node.exe node_modules\@vue\cli\bin\vue.js create demo

能回答以下问题，就掌握了脚手架的实现原理：

安装是根据package.json中bin对象，key是作为环境变量中可执行命令，value指向的实际运行js文件

- 下载项目和依赖包到全局 node_modules 中
- 读取package.json的bin字段创建vue可执行文件,指向bin/vue.js文件

- 环境变量中查找vue命令
- 使用node环境执行bin/vue.js文件

- 首行是`#!/usr/bin/env node`指明node执行

"bin": {
   "haotianqi": "donglaxiche.js"
 },

#!/usr/bin/env node
console.log("donglaxiche.js 执行了");