3-1 脚手架架构设计和技术方案设计全过程

1. 一周导读

1.1 标题

• 脚手架需求分析和架构设计，核心流程开发

1.2 将收获什么

• 架构设计和技术方案设计全过程
• 脚手架执行核心流程和 commander 框架
• 如何让 Node 项目支持 ESModule

1.3 主要内容

• 脚手架需求分析和架构设计
• 脚手架模块拆分策略和 core 模块技术方案
• 脚手架执行准备过程实现
• 脚手架命令注册实现(基于 commander)

1.4 关键词

• 脚手架 - 掌握脚手架需求分析和架构设计
• 架构设计 - 图解架构设计图+绘图技巧
• commander - 脚手架开发框架

1.5 学习方法

• 学以致用: 将上一章中学到的知识进行实际应用(import-local/local dependencies/Promise chain 等)
• 动手实践: 听完课程讲解后一定要动手画图，跟着老师把代码敲一遍，有很多技术细节需要在自己开发过程中去感悟和理解

1.6 注意事项

• 本章前半部分偏架构设计，这部分内容很重要，是架构师的工作日常
• 大厂架构师很多时候不是边写边想，而是把整体和局部都想清楚了再开始做
• 注意培养自己的思考能力，将代码实现细节的内容抽象，通过系统论的思想构建复杂系统

2 谈谈大厂怎么做项目

3 前端研发过程中的痛点和需求分析

3.1 痛点分析

• 创建项目/组件时，存在大量重复代码拷贝: 快速复用已有沉淀
• 协同开发时，由于 git 操作不规范，导致分支混乱，操作耗时: 制定标准的 git 操作规范并集成到脚手架
• 发布上线耗时，而且容易出现各种错误: 制定标准的上线流程和规范并集成到脚手架

3.2 需求分析

• 通用的研发脚手架
• 通用的项目/组件创建能力
  • 模板支持定制，定制后能够发布生效
  • 模板支持快速接入，极低的接入成本
• 通用的项目/组件发布能力
  • 发布过程自动完成标准的 git 操作
  • 发布成功后自动删除开发分支并创建 tag
  • 发布后自动完成云构建、OSS 上传、CDN 上传、域名绑定
  • 发布过程支持测试/正式两种模式

4 大厂如何做git操作

5 脚手架架构设计 + 绘制架构图

5.1 imooc-cli 脚手架架构设计图

6 脚手架模块拆分策略 + core 模块技术方案

6.1 脚手架拆包策略

• 核心流程: core
• 命令: commands
  • 初始化
  • 发布
  • 清除缓存
• 模型层: models
  • Command 命令
  • Project 项目
  • Component 组件
  • Npm 模块
  • Git 仓库
• 支撑模块: utils
  • Git 操作
  • 云构建
  • 工具方法
  • API 请求
  • Git API

6.2 拆分原则

• 根据模块的功能拆分
  • 核心模块：core
  • 命令模块：commands
  • 模型模块：models
  • 工具模块：utils

7 core 模块技术方案

7.1 命令执行流程

• 准备阶段
• 命令注册
• 命令执行

涉及技术点

• 核心库
  • import-local
  • commander
• 工具库
  • npmlog
  • fs-extra
  • semver
  • colors
  • user-home
  • dotenv
  • root-check