我在 2024 年这么搭建前端项目
2024年初时做的事情，当时记了一些过程，如今翻找出来，再完善一下
最近帮助后端同事搭建了一个内部运维项目的前端部分，以下是心路历程
最开始，我想用 Next.js ，一方面是这两年 next.js 一直在推出一些有趣的东西如 Server action、App router，想学学这些新东西，另一方面是社区生态真的太丰富了，想用什么都能找到，不过最重要的是想尝试一下 v0.dev，看看能不能直接用 AI 生成 UI 一步到位。
不过实践下来发现事情并没有想象中的那么美好：
1. 慢
我本以为 vercel 自己搞的 Turbopack 应该能让我体验到飞一般的开发速度，但实际上仅用 npx create-next-app@latest 创建出来的模板项目，其启动速度慢的都想让我放弃了
2. 复杂
我本以为用现成框架会是一件很省事的事情，但实际打开文档后，面对多年发展、沉淀下来纷繁复杂的名词、函数、配置项，我头变大了，它要爆炸了
3. UI 苦
- 我最初用 v0.dev 生成了一个看起来不错的 UI，兴高采烈的展示给了好几个同事看，感叹到自己终于不用写 UI 了。有点美中不足的是它的实际代码丑得可怕，v0.dev 的生成代码用了 tailwind 做样式，而 tailwind 用 class 表达样式的特性让代码的数量级和复杂度都瞬间上升。最开始我还蛮开心的，感觉能用就行，但后面仔细想想这个东西基本无法靠人无法维护，属于一次性用品，难过。
- 因为生成的是纯 UI 样式代码，所以组件一个功能逻辑都没有，还得自己重新实现，想想这个工作量还是算了。2024年了基础功能还要我自己写？浪费生命
基于上述原因，我不想用 Next.js，也不想用 vercel 生态那一套东西了，还是自己苦哈哈的凑一套配置出来吧
最终清单如下
- 打包工具：Rsbuild
- 开箱即用，几乎无缝使用 webpack 配置，简单、快
- 数据获取：SWR
- 接口获取，使用简单
- 前端路由：React-router
- 其实这个项目没有复杂的 URL 需求，只要几个页面跳转，写几行切换代码就行，但想试试最新的 router 使用体验
- 组件库: Ant design
- 选蚂蚁设计就对了，让你飞起来
- 状态管理：Remesh
- 纯个人偏好，较为复杂，但需求简单、没写几行
上述配置中除了 Remesh 其他的选型就两个原则：简单、快
其实最初他就想找一个开源管理系统项目改改用用，我看了看那个项目文档之后劝他不要用，一、项目与团队现有技术栈不匹配，上手成本高，二、项目自身复杂度高，开发维护成本高。讲人话就是，在这么复杂项目上面开发，谁来做，后面又谁来维护？
项目搭好、快速跟后端配合写完几个页面、把核心功能实现后我的使命就基本结束了。得益于选型简单，之后后端同事自己一人用 copilot 实现了一些前端功能点，偶尔也会联合几个有空的前端同事一起做做看上去有趣的功能。