如何构建一个 Web 开发模板仓库

作为一名全栈开发者，最有用的事情之一就是构建一个基础模板仓库。这将是一个最小化的项目，包含你在新项目中想要使用的所有最喜欢的工具和库。这有两个主要的好处：

1. 它是巩固你对工具的理解的一个极好方式。
2. 当你有一个新项目的创意时，你可以迅速将你的模板仓库作为起点来使用。

就我个人而言，当我有一个新创意时，开始的阶段是一个很大的障碍。尽管有很多启动项目可以使用，我仍然需要逐个筛选，选择出我想用的框架。现在，拥有一个基础模板仓库后，我可以马上开始设置一个新项目。

那么，基础模板仓库应该包含哪些内容呢？推荐以下内容：

1. 有趣的名称

你的基础项目应该有一个有趣的名称！我想选择一个让我联想到“快速”的名字，所以我选择了Valtteri（来自唯一的F1车手Valtteri Bottas）。

2. Monorepo（单一代码仓库）

强烈建议使用Monorepo来构建你的基础模板仓库。这将允许你将所有项目放在一个仓库中，并且可以轻松地在它们之间共享代码。有几个理由喜欢这种方法，以下是我最喜欢的三个原因：

• 更好的AI上下文
  在AI的时代，这意味着你的AI工具可以一次性看到整个项目。如果你把项目的各个部分分散到不同的仓库中，使用前端AI时，你需要手动从后端复制粘贴代码来提供上下文。
• 更易管理的CI/CD流水线
  拥有一个仓库意味着可以更简便地创建一个CI/CD流水线，处理整个项目，只需一个提交，而无需在多个仓库之间协调。
• 共享依赖关系
  你可以轻松地在项目之间共享和更新依赖，而不需要链接包或使用私有包。

3. 前端/后端/全栈框架

目前有一些行业标准的选择。首先，你可以选择像Next.js或Remix这样的全栈框架，它们同时包含前端和后端，都是很好的选择。如果你还没有学习其中之一，我建议你学习它们，至少了解一下是否喜欢，并能把它们写在简历上。

如果你放弃使用包含前后端的全栈框架，你需要分别选择前端和后端框架。对于前端，我推荐使用纯React，个人偏好是使用Fastify作为后端框架。你当然可以选择其他非JavaScript生态的后端框架，但我个人喜欢能够在前后端之间共享代码。

一旦选择了框架，你还需要做一些框架特定的决策，例如是否在Next.js中使用server actions等。对于这些决策，查看框架的文档会很有帮助。

建议使用TypeScript。它是行业标准，会让你的项目更加稳健。

4. 前端状态管理

有很多方法可以管理前端状态。我建议按以下顺序学习：

• Zustand
• MobX
• React Context API

如果你没有听说过Zustand或MobX，它们都是可观察的状态管理库。这意味着它们尽量减少应用程序的重新渲染，并且减少了状态管理的样板代码。

建议避免使用像Redux这样的老旧状态管理库。如果你想尝试它们以了解为什么它们不再流行，倒是可以，但我建议坚持使用上面提到的库。

5. 后端：GraphQL或REST

如果你使用传统的后端框架（如不是Next.js或Remix），你需要决定是使用GraphQL还是REST。我个人偏好GraphQL，但REST仍然非常重要。如果你选择使用GraphQL，并且选用了Fastify作为后端框架，可以使用Mercurius作为GraphQL的解决方案。我还喜欢使用Pothos来构建GraphQL的schema。

你的后端模板仓库中还应该包含以下内容：

• 认证/授权
• 示例查询和输入验证
• 限流
• 数据库

6. 数据库

你需要做出以下几项选择：

• 使用哪种数据库
• 使用哪种ORM（对象关系映射）
• 数据库的托管位置

对于数据库，关系型数据库仍然对大多数项目非常重要，我推荐使用PostgreSQL。

在ORM方面，Prisma是一个非常棒的选择，Drizzle也在快速增长。我建议尝试这两个，看哪个更适合你。尽量避免使用老旧的ORM，如Sequelize。

对于数据库托管，有很多不错的选项。目前我找到的最好的免费开发数据库选项是Neon和Xata。对于生产数据库，我建议了解一下Google Cloud SQL。

你还可以考虑使用像MongoDB这样的支持文档数据的数据库。如果你愿意的话，可以在基础模板仓库中同时包含两者！就我个人而言，我主要需要关系型数据库。

如果你还没有最喜欢的工具来探索和管理数据库，我喜欢使用TablePlus。

7. 认证

你需要选择一个认证平台。很多人建议自己实现认证功能：虽然这不是我的观点，但如果你有兴趣这样做，我建议你研究一下NextAuth.js。

对于具有慷慨免费额度的认证平台，我推荐Supabase Auth、Stytch和Logto。需要注意的是，很多这些平台在超过免费额度后费用不菲，所以在开发期间要注意使用量。通常来说，如果你要构建付费产品，确保定价模型足够好，这样一旦超过免费额度，你的收入足以覆盖费用。

8. 端到端测试

你的基础模板仓库中必须包括一个端到端测试套件。Playwright和Cypress是很好的选择。

9. 托管

你需要托管项目的一些部分，以下是我的推荐：

• 使用Next.js时可以选择Vercel
• 前端托管可以选择Netlify或Vercel
• 一般托管需求可以使用Google Cloud Platform（例如，如果你需要文件存储或其他服务）
• 开发数据库使用Neon
• 生产数据库使用Google Cloud SQL

Vercel一直在创新，但我最近发现Netlify在设置预览部署方面非常好。Vercel也有预览部署功能，但我遇到过一些问题。

像AWS这样的其他云服务提供商也很不错，但我个人在使用Google Cloud Platform时的体验最为出色。

10. CI/CD

CI/CD是指持续集成和持续部署。持续集成是指在每次提交时自动测试你的代码更改，持续部署是指在每次提交时自动部署你的代码。

我推荐以下工具：

• CircleCI
• GitHub Actions

CircleCI是我个人的最爱：它有非常棒的免费额度，且付费层次也非常合理。

11. 前端组件库

目前有很多有趣的前端组件库。我个人非常喜欢Mantine，但许多人也喜欢使用Shadcn/UI。尽管自己构建组件库是很有诱惑力的，但我建议你从这些库开始。

选择一个具有良好可访问性和主题功能的组件库。这两个特性在项目完成后实现起来尤其棘手。

12. 示例页面

你的项目还应该包括几个可以作为起点的示例页面。这些页面应包括以下内容：

• 主页
• 登录/注册流程
• 仪表盘页面
• 个人资料页面
• 设置页面
• 404页面

这些页面应使用你选择的组件库进行样式化，并且使用你喜欢的导航模式（如侧边导航、顶部导航等）。认证流程应使用你选择的认证提供程序实现。

构建这些页面将帮助你验证你想在整个栈中使用的所有模式。例如，在实现认证后的仪表盘页面时，你可能会发现你选择的认证提供程序在与后端的配合上出现了问题。在模板仓库中遇到这些问题总比在实际项目中遇到要好。

13. 密钥管理

你将需要使用API密钥和机密，将它们安全地存储到.env文件中。我个人非常喜欢使用Infisical来管理这些密钥。

14. 错误日志记录

Sentry是行业标准的错误日志记录工具。它有慷慨的免费额度，且集成过程简单，包括将源映射上传到CI/CD流水线。

15. 支付处理和订阅管理

如果你

正在构建项目，肯定会尝试将至少一个项目做成付费产品。以下是一些具有慷慨免费额度的优秀选择：

• Stripe
• ChargeBee

与认证平台一样，你需要确保你的定价模型合理，确保一旦超过免费额度，你的收入足以覆盖费用。

你也可以跳过这一步，因为它有些复杂，不适用于仅仅为了学习或构建开源项目的情况。

16. Lint规则

这一步很简单，但每个人对Linting都有偏好。花些时间查看一些公司所提供的配置文件，看看你喜欢哪种，并根据需要修改它们。

Airbnb的配置是一个很好的起点，我还建议包含Prettier。

17. 文档

你还应该包括一个文档页面，解释如何使用你的基础模板仓库。包括一个快速入门指南，所需密钥的说明，以及项目中包含的所有工具和库的参考。列出每个工具和库的选择原因也会很有帮助，因为你以后可能会忘记某些细节。

---

听起来很多？

确实很多，但考虑到你只需要做一次！这将节省你很多时间，尤其是当你想尝试一个新框架时。例如，如果你最初选择了Prisma，但又对Drizzle感兴趣，你只需替换ORM，重新设置你的项目即可。

给自己一些时间来构建它。某些部分容易陷入深入，但这都是值得的。我在2023年夏天构建了我的第一个基础模板仓库。现在，时间过去了一些，我开始着手构建第二个。预计还需要一个月或两个月，但我可以复用第一个模板仓库的大部分内容，尤其是CI/CD流水线。

开始构建

在GitHub上创建一个模板仓库是最简单的方式。你可以按照GitHub的指南进行操作。

如果你已经有了一个仓库，想要将其变成模板仓库，可以在仓库设置中进行操作。一旦你有了模板仓库，创建新仓库就很简单了：只需打开模板仓库，点击“Use this template”即可。

示例

我目前仍在完善我的模板仓库的最新版本，因此暂时不分享。不过，我会分享一个最近有人分享给我的模板仓库：SaaS Bold。

他们免费提供了一个最小化的模板，可以探索他们网站上查看更多他们所包含的各种功能。