前端的工具究竟在做什么

2024年2月6日

背景

我 2020 年的时候开始在一个 10年+、60多万行代码的千万级用户的建站产品持续沉淀前端基建 3 年，从没有模块化、无法使用新语法等到规范化、工具化、自动化的一套前端基础设施。

这节先聊聊日常涉及的前端工具究竟在做什么？工具是为了解决问题存在的，所以我们先来分析下前端开发过程的特殊性和有哪些问题。

前端的特殊性

  1. 端依赖性和兼容性（包括浏览器、小程序、Android / iOS 等）
  2. 存在大量需要复用的需求（产品设计组件化和标准化的多项目复用、多端复用）
  3. 天然分布式、没有高并发问题
  4. 在 ES6 之前没有标准的模块化处理方案 （历史问题）
  5. 发展快，业界技术沉淀不丰富（历史问题）
  6. 快速部署

由于以上特殊性带来的问题，我们需要一些解决这些问题的工具和流程。

工具解决什么问题

开发环境

依赖管理

关于依赖管理，业界有很多优秀的工具：npm、yarn、pnpm 等，一般情况下，这些工具都是可以相互转化的，比如用了 npm ，转到 yarn 和 pnpm 成本并不会很大，那我们在使用的时候究竟在关注什么呢？

  1. 没有幽灵依赖问题（npm、yarn 都存在这个问题)
  2. 依赖版本安装正确、快速、占用磁盘空间小
  3. Monorepo 的支持 (pnpm 目前是支持得比较完善的）

构建工具

构建工具百花齐放，Webpack、Rollup、Vite、Turbopack、RSPack 等，关注点有哪些呢？

  1. 模块化的支持
  2. 前端资源导入（图片、JSON、SVG 等）
  3. 语言特性和浏览器兼容性支持（ESNext、CSS 兼容性、JSX、TypeScript 等）
  4. 资源输出优化（DCE、压缩、分包）
  5. 本地伺服环境（前后端分离后需要 localhost 开发、HMR、SourceMap、 Mock 等）

从体验上来说，构建工具要做到功能完备、构建速度快、稳定性高（崩溃几率低）。

项目质量控制

Lint

ESLint、Stylelint、Prettier、类型检查 等都是语言的静态分析，用于发现代码风格、静态错误、类型错误的问题，我们也可以自定义项目业务代码规则、架构规范规则来保证规范的统一。

注意 Lint 应该是要提前到编码阶段发现，即使编写即使提示，需要增量检测的，不然越到后面发现，修改的意愿越低。

自动化测试

Jest、karma、ReactTestLibrary、VueTestUtils、Cypress 等单元测试、集成测试、E2E 测试工具有很多，目的是要降低代码变更带来的风险，核心是要增强代码的可测试性。

工具层面接入 CI，由于 UI 测试数量是庞大的，所以最好定时、并行的全量回归测试用例。

项目部署

如何自动化、稳定地部署代码变更到线上环境？

  1. CI 自动化构建 （Gitlab CI、Github CI、Jenkins 等）
  2. 自动化发布 （要和运维的发布系统打通）
  3. 灰度部署
  4. 快速回滚

这部分涉及运维部分较多，并且要与各个公司内部的系统和流程所对接，前端基本上只需要使用，设计稳定的部署流程即可。

线上问题发现

包括但不限于：错误监控系统、业务流量监控系统、性能数据监控系统、常见的 UI 场景自动化测试（404、空白等），错误和性能数据监控业界比较著名的 Sentry，关注的问题在于如何快速发现问题、定位问题、恢复正常。

后续

这节是浅浅地聊了一下我们工作中息息相关的前端基建的工具，从解决什么问题出发来看待这些工具，并非拿着锤子到处是钉子，不同场景下选择的工具可能不一样，要抓住核心问题。

这里可以请大家想一想，有没有在工作中遇到过需要自己造轮子的情况？为什么要造轮子？如何造轮子？