实战
因为之前的好几个课程没有安排好精力投入学习，很有压力，所以听课的时候状态比较低落，注意力不集中，课上其实没有觉得这节课都多么惊喜，课后看着课件做笔记，才发现老师的课件内容简直是宝藏。好感谢讲师大大的分享，让我对软件工程化、前端工程化有了足够的理解和思考。
打造/实现一个前端工程化方案
| 标题 | |
|---|---|
| 规范化 | 建立规范：建立符合实际需求的规范；确保规范被落地执行 |
| 模块化 | 沉淀（使用）模块：通过可复用模块提升效率和质量（工具、平台、组件、函数库等） |
| 自动化执行 | 将研发流程中涉及到的工作自动化完成 |
《整体架构图》的表格化 《研发流程和规范图》的表格化
- 定义开发流程和规范
- 打造工程脚手架
- 打造自动化CI/CD
| 研发流程和规范 | ||
|---|---|---|
| 定义 | 脚手架 | CI/CD |
| 【需求-设计】 | 【研发-调试-构建】 | 【集成-部署-运维】 |
| 研发流程和规范 | 脚手架 | CI/CD |
|---|---|---|
| 1. 规范化编码风格 | 1. 生成工程模板 | 1. 自动化集成，构建/检测 |
| 2. 规范化目录结构 | 2. dev调试 | 2. 自动化交付，保存记录和产物 |
| 3. 规范化代码提交 | 3. 构建生产 | 3. 自动化部署，产品部署到服务器 |
| 4. 规范化研发流程 | 4. 规范检测 |
准备工作
1. 服务器
- Docker
- Docker Image：Github、Jenkins、Nginx
2. 开发机
- Git
- Node
# jenkins
docker run -u root --rm -d -p 6001:8080 -p 50000:50000 -v jenkins-datqa:/var/jenkins_home -v /var/run/docker .sock:/var/run/docker.sock jenkinsci/blueocean
# gitlab
docker run -d -p 8443:443 -p 8222:22 -p 6002:80 --name gitlab --volume $HOME/gitlab/config:/etc/gitlab --volume $HOME/gitlab/logs:/var/log/gitlab --volume $HOME/gitlab/data:/var/opt/gitlab --privileged --restart always gitlab/gitlab-ee:latest
# nginx
docker run -d --name nginx -p 80:80 nginx:latest
制定和落地规范
- 参考业界规范，形成自己的规范
- 利用
prettier、lint、git hook在代码提交和CI过程中强制落地规范
npm install -D prettier
npm install -D eslint
npm install -D husky
npm install -D lint-staged
开始战斗
脚手架：项目创建
【脚手架-创建工程模板-安装依赖】
脚手架：项目创建 & 运行
npm install -g create-react-app
create-react-app qingxunying-example
cd qingxunying-example
npm start
脚手架：代码提交 & 前置检测
项目研发/调试:
【本地开发-本地调试-提交代码-前置检查-push代码到远程仓库-基于Webhook触发CI/CD】
前置检查：
git hook: commit
- 配置
Lint+ 利用Githook（在communit之前执行指定函数）实现 - 利用GitHookk在communit之前执行相关检测逻辑
- husky：操作Git hook钩子
- lint-staged：针对git提交的文件进行一些操作
git commit -m "test"
CI/CD：项目集成构建和交付
【触发Jenkins-构建-准入检查-部署/通知干系人】
stateDiagram-v2
触发Jenkins --> 构建
构建 --> 准入检查
准入检查 --> 部署（ok）
准入检查 --> 通知干系人（不ok）
【SCM（源代码管理）-构建-打包-部署】
graph TD
SCM --> 构建 --> 打包 --> 部署
执行shell（.sh脚本）
cd qingxunying-example
# lint
npm run lint
# test
npm run test
# 构建
npm build
# 打包
zip -q -r qingxunying.zip build/*
深入
构架方案
NoBundle
部署方案
有趣的问题：如何部署具备多台设备的集群？
- 蓝绿部署策略
- 滚动升级策略：滚动启用新的，暂停老的，直到升级完成。
- 灰度策略（金丝雀）：按照流量的百分比，将指定百分比的流量导入到新版本中。
总结
前端工程化方案的演进路径是什么？
