前端工程化目标.md

前端工程化目标

明确任务

• 工程化，与代码强相关，主要目的是提高代码质量，增强代码的长期可维护性，降低开发时间和成本。
• 团队管理，人员管理、权限管理（公司仓库 ➕ 提交权限 ➕ 发布权限）
• 项目管理，进行合理的项目管理，合适的工时排期和迭代计划，提高项目交付质量和效率。

前端工程化体系

Git 分支管理规范化

Git Flow

提交信息规范

提交信息应该描述“做了什么”和“这么做的原因”，必要时还可以加上“造成的影响”，主要由 3 个部分组成：Header、Body 和 Footer。

Header Header 部分只有 1 行，格式为(): 。

type 用于说明提交的类型，共有 8 个候选值：

1. feat：新功能（feature）
2. fix：问题修复
3. docs：文档
4. style：调整格式（不影响代码运行）
5. refactor：重构
6. test：增加测试
7. chore：构建过程或辅助工具的变动
8. revert：撤销以前的提交

scope 用于说明提交的影响范围，内容根据具体项目而定。 subject 用于概括提交内容。

Webpack

定制 Webpack 项目框架

选型 create-react-app umi 飞冰

定制后台管理系统脚手架 实现功能

• UI库
• 网络请求
• 路由系统
• 打包工具，Webpack/Vite
• 代码规范校验，使用 eslint、pre-commit、lint-staged、prettier、stylelint
• 模拟请求数据，mockjs
• 国际化

业务场景 ahook / 表单解决方案 formily / 低代码开发页面 designable

熟悉产品线业务 画出产品架构图

成果 （别人的成果、我的目标）

开发效率 普通列表页面（搜索、展示、弹窗 ）包含接口联调自测 ------> 耗时n天 详情页面（复杂一点的表单交互、表单组件联动） ------> 耗时n天

系统情况 SaaS 系统，首次无缓存加载耗时 x s ，y 多个页面，z 个公用组件，打包出来的体积在 i MB

基建进度表 参考

参考文献 我是如何突围传统行业的