脚手架是什么

核心目标

提升前端研发效能

将研发过程自动化，标准化，数据化。

本质

脚手架的本质是一个操作系统的客户端，通过命令执行。

执行命令通常由主命令、command、option三部分组成，即：主命令 command [command param] [option] [option param]

简单的执行过程

以vue cli为例子，输入vue后的执行的大概过程如下：

• 输入主命令后，首先会去从环境变量中寻找vue命令的路径
• 根据找到的vue命令链接到实际的vue.js
• 利用node执行vue.js
• 通过vue.js解析用户数据的后续参数
• 执行用户指令

开发脚手架的简单过程

以vue cli为例：

• 开发一个包含bin/vue.js目录的npm项目，发布在npm上
• 安装此项目到node的lib/node_modules下
• 指定node bin 目录下的vue连接至开发的vue.js

回答三个问题

为什么全局安装@vue/cli后会添加命令为vue?

答：因为安装后会自动在node的bin目录下建立vue软链接文件, 这个软链接文件指向了node/lib/node_modules/@vue对应vue.js，由于node/bin目录是在环境变量下的，所以等于添加了命令vue。

全局安装@vue/cli后发生了什么?

答：执行过程如下：

1. 下载了vue.js命令解析执行文件到node/lib/node_modules下
2. 在node/bin目录下创建vue软链接文件连接到node/lib/node_modules对应vue.js

执行vue命令时发生了什么？为什么vue指向一个js文件我们却可以通过vue命令去执行它?

答：第一个问题参考上面的 简单的执行过程，通过下面的vue软链接文件的内容我们可以知道第二个问题的答案：

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
  ret=$?
else 
  node  "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
  ret=$?
fi
exit $ret

通过这个文件的内容我们可以清晰的看到，本质上其实就是利用shell命令执行了node vue.js