脚手架 CLI

脚手架是什么

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

  vue create vue-app

这条命令由主要三个部分组成

• 主命令：vue
• 指令：command:create
• 参数：param: vue-app

它表示创建一个vue项目，名称为vue-app，以上是一个较为简单的命令，实际场景往往更复杂：

选项 option：当前目录已经有一个项目了，我们需要进行覆盖，强制安装，此时可以输入：

vue create vue-app --force

这里的 --force 叫做 option，用来辅助脚手架确认用户在特定场景下的的选择。

还有一种场景： 当我们希望初始化项目时 npm install 使用淘宝源，可以输入：

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

这里的-r也叫做option，与--force不同的是它使用-，并且是简写，-r也可以换成--registry，--force也可以换成-f。

可以使用以下命令来查看所有的命令：

vue create --help

为什么需要开发脚手架：存在大量重复的工作

1. 创建项目+通用代码

• 埋点
  • http请求
  • 工具方法
  • 组件库

2. git操作

   • 创建仓库
   • 代码冲突
   • 远程代码同步
   • 创建版本
   • 发布打tag

3. 构建+发布上线

   • 依赖安装和构建
   • 资源上传cdn
   • 域名绑定
   • 测试/正式服务器

脚手架体现的价值

• 自动化：项目重复代码拷贝/git操作/发布上线操作
• 标准化：项目创建/git flow/发布流程/回滚流程
• 数据化：研发过程系统化/数据化/使得研发过程可量化

和自动化构建工具的区别

问题：jenkins等自动化发布工具已经很成熟了，为什么还要自研脚手架？

• 不能满足需求：不能本地自动化
• cli可定制化

脚手架原理

执行原理

1. 输入命令 vue create vue-app
2. 终端解析vue命令
3. 终端在环境变量中找到vue命令
4. 终端根据vue命令查找到实际文件vue.js
5. 终端利用node执行vue.js
6. vue.js解析command/options
7. vue.js执行command
8. 结束执行

相关问题

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

  npm install -g @vue/cli

vue指令并不是由包名称@vue/cli决定的，而是由@vue/cli包下的package.json的bin字段指定的：

  // package.json
  "bin":{
      "vue":"bind/vue.js"
  }

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

将@vue/cli安装到全局目录，解析package.json的bin字段，配置软连接指定vue命令的执行文件vue.js。

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

js文件指定环境变量，使用node环境：

  #!/usr/bin/env node
  console.log('hello world')

4. 为什么说脚手架是客户端？

实际客户端是指node，node给脚手架提供了能力。

5. 怎么创建命令别名？

使用软连接

6. 脚手架执行全过程？

   1. 执行vue create vue-app，终端查询环境变量，获得对应的指令，找到指定文件

   2. 通过文件的环境配置#!/usr/bin/env node在对应环境中执行文件

脚手架功能架构需要考虑什么

• 可扩展：能够快速复用到不同团队、适应不同团队之间的差异
• 低成本：在不改动脚手架源码的情况下，能够更新模板，且新增模板的成本很低
• 高性能：控制存储空间，安装时充分利用Node多进程提升安装性能

实现一个脚手架

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