脚手架 CLI

提升开发效率，主要抓手是脚手架 CLI。

一、功能点

一个脚手架(CLI)应该包含如下功能点：

项目初始化(cli init)

• 支持项目类型选择：项目/组件
• 支持项目模板选择(中后台、小程序、React、Angular)
• 支持自动安装依赖
• 支持自动启动项目

项目发布(cli publish)

• Git 配置检查(登录Git账号、创建远程仓库、自动创建.gitignore、执行 git 初始化)
• 可推送至远程分支
• 支持云构建 + 云发布
• 支持项目发布(可统计时间)

发布至生成环境(cli publish —prod)

• 支持 TAG 打标，发布完后会自动删除已开发的分支
• 发布完后支持当前项目的版本升级

功能扩展(后续)

• 植入用户权限校验，保证安全性、规范性；

二、脚手架开发难点解析

在开发脚手架时，需要解决不少难点，下面罗列了一些要解决的主要难点。

难点一：复杂系统分包

即如何将一个复杂的系统拆分成若干个模块，并最终又合成一个复杂系统。

难点二：命令注册

如何进行命令注册，并将注册的命令执行到对应的方法上。

举例：vue 后面可以跟一系列命令，然后执行不同操作。

vue create
vue add
vue invoke

难点三：命令参数解析

如何实现命令参数(即辅助选项options)解析

举例：vue command [options] <params>

• options 通常作用于 command，如：vue create -h、vue add -h；
• 常见的 options 参数，有--version、--help，也可简写: -v、-h；
• 带 params 的options：--path /Users/bgl/Desktop/vue-test

难点四：提供帮助文档

帮助文档非常重要，有助于开发者了解脚手架如何使用

• global help(全局帮助，只表示主命令用法)
  • Usage (用法)
  • Options
  • Commands

举例： vue 主命令的帮助信息如下

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 mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  Run vue <command> --help for detailed usage of given command.

• command help(表示子命令的用法)
  • Usage
  • Options

举例： vue create 子命令的帮助信息如下

➜  ~ vue create -h
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
  --merge                         Merge target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy <proxyUrl>          Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  --skipGetStarted                Skip displaying "Get started" instructions
  -h, --help                      output usage information

其他难点

还有很多其他开发难点，如：

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

等等….

三、技能树

开发脚手架 CLI 这个项目，可获取以下技能：

• 架构设计 - 了解基础架构设计思路和架构图绘制方法；
• 脚手架 - 掌握脚手架原理和开发全流程，并掌握脚手架调试技巧；
• Lerna - 了解多 Package 项目管理痛点，并基于 Lerna 脚手架框架搭建多 Package 项目的解决方案

衍生知识

1. 如何做好架构设计

• 架构三部曲：掌握原理 -> 独立思考 -> 总结反思
• 深度剖析优秀开源项目，由表及里，由浅入深
• 视角切换：多切换到架构师视角，从全局思考问题

1. 学习开源项目(脚手架相关)

• Lerna 源码分析(剖析 Lerna 架构设计)
• Node 的 module 模块分析
• yargs 使用方法