脚手架架构设计

脚手架简介

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

js 复制代码

vue create vue-test-app

上面这条命令由 3 个部分组成：

主命令: vue
command: create
command 的 param: vue-test-app
它表示创建一个 vue 项目，项目的名称为 vue-test-app，以上是最一个较为简单的脚手架命令，但实际场景往往更加复杂，比如：
当前目录已经有文件了，我们需要覆盖当前目录下的文件，强制进行安装 vue 项目，此时我们就可以输入

js 复制代码

vue create vue-test-app --force

这里的 --force 叫做 option，用来辅助脚手架确认在特定场景下用户的选择（可以理解为配置）。还有一种场景：

通过 vue create 创建项目时，会自动执行 npm install 帮用户安装依赖，如果我们希望使用淘宝源来安装，可以输入命令：

js 复制代码

vue create vue-test-app --force -r https://registry.npm.taobao.org

这里的 -r 也叫做 option，它与 --force 不同的是它使用 -，并且使用简写，这里的 -r 也可以替换成 --registry
-r https://registry.npm.taobao.org 后面的 registry.npm.taobao.org 成为 option 的 param，其实 --force 可以理解为：--force true，简写为：--force 或 -f

脚手架执行原理

脚手架的执行原理如下：

在终端输入 vue create vue-test-app
终端解析出 vue 命令
终端在环境变量中找到 vue 命令
终端根据 vue 命令链接到实际文件 vue.js
终端利用 node 执行 vue.js
vue.js 解析 command /options
vue.js 执行 command
执行完毕，退出执行

从应用的角度看如何开发一个脚手架

这里以 vue-cli 为例

开发 npm 项目，该项目中应包含一个 bin/vue.js 文件，并将这个项目发布到 npm
将 npm 项目安装到 node 的 lib/node_modules
在 node 的 bin 目录下配置 vue 软链接指向 lib/node_modules/@vue/cli/bin/vue.js
这样我们在执行 vue 命令的时候就可以找到 vue.js 进行执行

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

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

把 @vue/cli 下载到 node/v12.11.1/lib/node_modules 目录中。
解析 package.json 中 bin 的配置，在 bin 配置的指令和实际执行的 JS 之间建立软连接。

脚手架命令执行的全过程

查看实际链接文件

脚手架开发流程

创建 npm 项目
创建脚手架入口文件，最上方添加： #!/usr/bin/env node
配置 package.json，添加 bin 属性
编写脚手架代码 - 将脚手架发布到 npm

脚手架使用流程

安装脚手架
npm install -g your-own-cli
使用脚手架
your-own-cli

脚手架开发难点解析

分包：将复杂的系统拆分成若干个模块
命令注册：
vue create
vue add
vue invoke
参数解析：
vue command [options] <params>
options 全称：--version、--help
options 简写：-v、-h
带 params 的 options：--path /Users/sam/Desktop/vue-test
帮助文档：
- global help
  - Usage
  - Options
  - Commands

示例：vue 的帮助信息：

js 复制代码

Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  create [options] <app-name>                                 create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]                      install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]                   invoke the generator of a plugin in an already created project
  inspect [options] [paths...]                                inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                                     serve a .js or .vue file in development
...

command help
- Usage
- Options
  vue create 的帮助信息：

js 复制代码

Usage: create [options] <app-name>

create a new project powered by vue-cli-service

Options:
  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing
dependencies (only for npm)
  -g, --git [message]             Force git initialization with initial commit message
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists