Skip to content
大纲

前端工程化(bata)

从开发,规范,测试,lint,构建,部署,监控,集成,微服务等多个维度,以组合拳的形式,场景化的提升前端工程师的认知 实现整个前端团队底层链路的统一

产品架构

例子:从产品角度来说项目应该有

  • 统一:支付 | 登录注册 | wik知识共享仓库 | 组件库 |接口规范|前端构建工具| 研发流程规范 |监控环境|测试环境|项目模板(业务和工具)| 产品所有权限控制

  • 私有的npm仓库

私有npm仓库

verdaccio

组件规范与设计-组件库

方案1,基于vite

方案2,基于webpack

Git提交与编写代码规范

husky

当您提交或推送时,您可以使用 husky 来检查您的提交消息、运行测试、检查代码等Husky 支持所有 Git 钩子。

Eslint

中文官网

Airbnb JavaScript Style Guide 英文| Airbnb JavaScript Style Guide 中文

任务管理和打包工具

前端监控

sentry

线上Debug手段

待完善....

性能测试

OneAPM Browser Insight

YSlow/PageSpeed

单元测试

Jest

持续集成与发布:CI/CD

CI CD一般包含三个概念:持续集成(Continuous Integration ,CI),持续交付(Continuous Delivery),持续部署(Continuous Deploy)

1. 持续集成CI

持续集成的目的,就是让产品可以快速迭代,同时还能保持高质量。它的核心措施是,代码集成到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成

ps:(ci)代表专注ci

  1. Jenkins(ci)
  2. Drone(ci)
  3. Github ci
  4. Wercker(ci)
  5. Snap(ci)
  6. TeamCity(ci)
  7. Circle ci
  8. Travis ci
  9. Codeship(ci)

持续交付

持续交付(Continuous delivery)指的是,频繁地将软件的新版本,交付给质量团队或者用户,以供评审。如果评审通过,代码就进入生产阶段。

持续交付可以看作持续集成的下一步。它强调的是,不管怎么更新,软件是随时随地可以交付的。

持续部署

持续部署(continuous deployment)是持续交付的下一步,指的是代码通过评审以后,自动部署到生产环境。

持续部署的目标是,代码在任何时刻都是可部署的,可以进入生产阶段。

持续部署的前提是能自动化完成测试、构建、部署等步骤。它与持续交付的区别,可以参考下图。

  • 方案1(大而全) GitLab-CI 基于GitLab-CI

  • 方案2(小而美)

    gitea + drone

持续交付(CD)通常是指整个流程链(管道),它自动监测源代码变更并通过构建、测试、打包和相关操作运行它们以生成可部署的版本,基本上没有任何人为干预。

CI/CD

GiteaDrone


其他

纯 Git 实现前端 CI/CD

参考1