脚手架简介

脚手架简介

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

vue create vue-test-app

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

• 主命令：vue
• command: created
• command的param: vue-test-app

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

vue create vue-test-app --force

这里的–force叫做option,用来辅助脚手架确定在特定场景下用户的选择(可以理解为配置)。还有一种场景：
通过vue create 创建项目是，会自动执行npm install 帮用户安装依赖，如果我们希望使用淘宝源来安装，可以输入命令：

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

这里的-r也叫做option，它与–force不同的是它使用 - , 并且使用简写，这里的-r也可以替换成 --registry, 我们可以通过vue create支持查看所有的options:

vue create --help

-r https://registry.npm.taobao.org后面的https://registry.npm.taobao.org成为option的param,–force可以理解为： --force true 简写为： --force 或 -f

脚手架执行原理

脚手架的执行原理如下：

• 在终端输入 vue create vue-test-app
• 终端解析出命令
• 终端在环境变量中找到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_moduels/@vue/cli/bin/vue.js

这样我们在执行vue命令的时候可以找到vue.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

• 命令行交互
• 日志打印
• 命令行文字变色
• 网络通信：HTTP/WebSocket
• 文件处理

脚手架本地link标准流程

链接本地脚手架

cd your-cli-dir
npm link

链接本地库文件

cd your-lib-dir
npm link
cd your-cli-dir
npm link your-lib

取消链接本地库文件

cd your-lib-dir
npm unlink
cd your-cli-dir
 // link存在
npm unlink your-lib
 // link不存在
 rm -rf node_modules
 npm install -S your-cli-dir

理解：link

• npm link your-lib: 将当前项目中node_modules下指定的库文件链接到node 全局node_nodules下的库文件
• npm link: 将当前项目链接到node全局node_modules中作为一个库文件，并解析bin配置创建可执行文件

理解： unlink

• npm unlink: 将当前项目从node全局node_modules中移除
• npm unlink your-lib: 将当前项目中的库文件依赖移除

lerna开发脚手架流程