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