vue-cli脚手架命令的执行过程

上一篇文章，已经大致了解脚手架是什么以及脚手架是如何工作的。接下来，稍微深入一下脚手架的工作过程（以vue-cli为例）。首先抛出3个问题：    

        1.明明全局安装的是@vue/cli，最后执行的命令却是vue？

　　2.全局安装@vue/cli时发生了什么？

　　3.执行vue命令时发生了什么，为什么vue指向某个文件，我们却可以直接通过vue命令执行它？

弄清楚这3个问题，基本上对脚手架的原理已经有个大体的认识，文章最后会详解自定义npm命令哦~

首先，第一个问题为什么安装的是@vue/cli，执行的命令是vue，先找到npm文件夹：

 这是vue命令的执行文件，打开会发现有这样一行代码：

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\node_modules\vue-cli\bin\vue" %* 

这行代码的作用是，将当前命令指向\node_modules\vue-cli\bin\vue，所以即使我们用的命令是vue，最终还是指向@vue/cli内部的文件。

第二个问题，全局安装@vue/cli时发生了什么：

1.下载node_modules

2.在package.json里面配置bin的软链接:

 第三个问题，vue命令最终会指向vue-cli内的某个文件，为什么可以执行它：

前面我们已经知道，vue命令执行的时候，会先找到vue文件（AppData\Roaming\npm\vue.cmd）并执行，执行这个vue文件的时候，会发现这是一个软链接，实际指向的是：\node_modules\vue-cli\bin\vue 该路径的vue文件，最后才会执行这个文件。那么问题来了，vue命令指向的这个文件，是如何执行的？前端的同学们都知道，node环境下执行js文件，需要加一个node命令前缀，才可以执行该js文件。那这个地方的文件，是如何执行的呢？我们找到vue-cli\bin\vue文件：

 打开会是下面这几行代码：

#!/usr/bin/env node

const program = require('commander')

program
  .version(require('../package').version)
  .usage('<command> [options]')
  .command('init', 'generate a new project from a template')
  .command('list', 'list available official templates')
  .command('build', 'prototype a new project')
  .command('create', '(for v3 warning only)')

program.parse(process.argv)

没错，主要就是第一行代码：

#!/usr/bin/env node

这行代码的作用，它会在我们的环境变量中找到node命令，并用node命令执行该文件！

至此，开头提出的三个问题都已经有了答案，现在再来看一下：vue create vue-test这条命令的执行过程：

        1.在终端输入：vue create vue-test

　　2.终端解析出vue命令

　　3.终端在环境变量中找到vue命令

　　4.终端根据vue命令链接到实际文件vue

　　5.终端利用node执行vue文件

　　6.vue解析command/options

　　7.vue执行command

　　8.执行完毕，退出

现在是不是对脚手架的工作原理理解更深刻一点了呢，其中的command将会在以后开发脚手架的时候会单独拿出来讨论。

最后，介绍一下自定义npm指令以及其软链接到其它文件：

首先在npm文件夹下新建一个wang.cmd:

@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\node_modules\vue-cli\bin\wang" %*

自定义的wang命令最终指向的是：vue-cli\bin\wang

 这个wang文件的内容如下：

1 #!/usr/bin/env node
2 
3 console.log('wang')

终端中输入wang：

自定义指令成功啦~

脚踏实地行，海阔天空飞~