滋溜鹿博客

Appearance

大纲

前端工程化(bata) ​

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

产品架构 ​

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

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

  • 私有的npm仓库

私有npm仓库 ​

  1. verdaccio 这里我推荐使用

  2. Nexus

组件规范与设计 ​

组件库 ​

vite+vue+vitepress

(vite/webpack)+react+dumi

业务项目构建 ​

  • spa:

    • vite(冷启动 基于esm+esbuild+rollup)
    • webpack

  • ssr:

    • nuxt.js(vue)
    • next.js(react)

Git提交与编写代码规范 ​

husky ​

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

Typescript ​

js的超集,优秀的静态检测能力,降低维护成本和，低级错误的出现

Eslint ​

中文官网

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

任务管理 ​

管理项目进度,推荐

  1. PingCode

  2. Worktile

  3. Notion

  4. SmartTask

  5. Teambition

  6. Jira

  7. MeisterTask(免费的看板任务管理工具)

  8. Flowus

  9. gitlab

  10. 飞书

  11. 钉钉

前端监控 ​

sentry

线上Debug手段 ​

SourceMap

开发mock ​

这里我只推荐

Apipost = Postman + Swagger + Mock + Jmeter

性能测试 ​

OneAPM Browser Insight

YSlow/PageSpeed

单元测试 ​

Jest

vitest

持续集成与发布:CI/CD ​

CI CD一般包含三个概念：持续集成（Continuous Integration ，CI），持续交付（Continuous Delivery），持续部署（Continuous Deploy）

一般来说使用 我们都是使用Docker来处理

1. 持续集成CI ​

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

ps:（ci）代表专注ci

  1. Jenkins(ci)
  2. Drone(ci)
  3. Github actions ci 开源常用
  4. Wercker(ci)
  5. Snap(ci)
  6. TeamCity(ci)
  7. Circle ci 开源常用
  8. Travis ci 开源常用
  9. Codeship(ci)
  10. DaoCloud有私有版

持续交付 ​

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

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

持续部署 ​

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

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

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

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

  • 方案2(小而美)

    gitea + drone

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

CI/CD

GiteaDrone

其他

纯 Git 实现前端 CI/CD

参考1