脚手架开发流程

先把原理讲通，方便后续的开发。 

后续都拿vue-cli举例

脚手架实现原理

• 为什么全局安装@vue/cli后会添加的命令为vue？
• 全局安装@vue/cli时发生了什么？
• 执行vue命令时发生了什么？为什么vue指向一个js文件，我们却可以直接通过vue命令去执行它？

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

mac下我们可以先通过which vue查找vue命令的实际文件路径，再定位到bin路径下，

bin目录下都是一堆可执行文件，通过命令ll查找到vue指令是个软连接，它实际指向的是后面的地址，这个地址是全局的node_modules，而bin/vue.js就是vue命令实际执行的文件

 

 那为什么执行vue命令会执行bin/vue.js呢？

我们定位到实际地址的@vue/cli目录下，查看package.json，里面有个bin，这个bin配置了vue这个命令以及实际执行的文件。

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

首先全局安装脚手架会把包下载到全局的node_modules下，下载完包之后会解析package.json下bin这个配置，如果说发现bin下有配置，它就会在node安装的主目录的bin目录下创建一个软连接。

执行vue命令时发生了什么？

这个上面说过了，就不再重复了

为什么vue指向一个js文件，我们却可以直接通过vue命令去执行它？

首先我们知道一个js文件它是不能被直接执行的，它必须通过解释器才能执行，比如node或者浏览器，很明显vue.js没有通过node去执行，那么它是怎么运行起来的呢？

我们先看看脚手架实际执行的bin/vue.js

 仔细看第一行，这一行特别关键，它的意思就是执行这个文件的时候到环境变量里找node这个命令，找到之后通过node命令执行，跟直接node vue.js是等价的。

下图是描述脚手架命令执行的全过程。

到此开头的几个问题就全解决了，接下来开始脚手架的开发了。

开发流程

1.创建npm项目

2.创建脚手架入口文件，最上方添加：

#!/usr/bin/env node

3.配置package.json，添加bin属性

4.编写脚手架代码

5.将脚手架发布到npm

使用流程

npm install -g your-cli

脚手架开发难点解析

1.分包：将复杂的系统拆分成若干个模块

2.命令注册，比如：

vue create

vue add

vue invoke

3.参数解析：

vue command [options]

举个栗子

options全称：--version、--help等

options简写：--V、--h

带params的options：--path /xxx/xxx

还有很多，比如：

命令行交互

日志打印

命令行文字变色

网络通信：HTTP/Websocket

文件处理

等等

快速开发一个脚手架

首先新建个文件夹，文件夹名和后面命令名都可以自定义合适的名字，初始化个package.json 

新建bin文件夹，在bin文件夹下新建Index.js，开头第一行添加#!/usr/bin/env node

 配置package.json配置bin

 发布脚手架到npm

npm login登录

npm publish

发布完之后可以到npm官网查看

之后就可以npm install -g sanstu-test进行安装

sanstu-test运行

本地如何调试

1.上级路径npm install

在脚手架项目的上级的路径下里通过npm install -g sanstu-test安装的时候会自动链接到本地的脚手架项目。

2.npm link

在脚手架项目目录下执行npm link之后，会在安装的node下添加对应的命令链向全局node_modules下的脚手架，而node_modules下的脚手架又会链向本地的脚手架，实现软链。

注册一个命令：sanstu-test init

首先一个命令是这样子的sanstu-test [command]，我们如何识别到command这个参数呢？

可以通过process库获取argv

这里第一个是node，第二个是脚手架，第三个就是参数，也就是说当第三个参数有的时候就可以进行解析执行相应的方法 。同理后面的[options] 参数也是一样的。