前端工程化实践

参考：《前端技术架构与工程》作者: 周俊鹏

前端工程化是前端开发的一种思维方式，是针对前端开发过程中遇到的一些列问题的解决方案。前端工程化围绕编码、方法、工具三个要素展开。
从前端应用的技术架构本身出发，关注点聚焦于模块解耦、数据管理架构模式、性能以及前后端分离，目标是实现架构的高可用性、可扩展性、可伸缩性，同时提高独立开发和跨团队协作开发的效率；
从架构之外的角度出发，关注点聚焦于前端应用的开发、架构、测试、部署以及持续化工程体系，目标是建立规范、有序、高效的迭代流程，降低产品迭代所消耗的人力和沟通成本。

开发阶段

  • 统一技术栈减少团队成员学习成本以及协作成本

  • 自建 Mock 平台让加快前端开发效率

    具体实践

  • 通过 Git 进行代码版本管理, 便于 Code Review 和 Version Revert

  • 通过 husky, @commitlint/cli, @commitlint/config-conventional 规范 Git commit

  • 通过 ESLint 检查代码错误，使用 Prettier 格式化代码

  • 通过 Code Review 责任连带机制严格把控代码质量

构建阶段

构建阶段主要围绕以下方面展展开：

  • 编程语言，将源代码编译为客户端可执行代码代码的过程，Babel/Typescript/PostCSS 等工具均属于此类

  • 性能优化，比如压缩混淆，自动生成 CSS Sprite，动态模块按需加载，文件 hash，图片优化等

  • 部署策略，比如给静态资源 URL 加入 Hash 指纹或者 CDN 路径等

  • 开发效率，比如文档生成，动态构建等
    具体实践

  • 审查评估，比如规范审查，性能评估等

测试

jest-dom
Jest
JavaScript 测试框架 Mocha
断言库 Chai
下一代自动化测试框架 Cypress

部署

其目的就是将资源准确地放到不同环境的服务器上，其核心在于流程的控制。

持续化

  • CI/CD

监控与统计

The Elastic Stack