在整个架构的最顶端，你的应用程序只需导入一个包，这样一来，用户界面就具备了跨平台的兼容性。

处处相同的设计系统

这种架构模式的真正价值在于：你只需要构建一次这个系统，之后就可以在所有发布的平台上重复使用它。

你在基础设计元素包中定义的按钮，无论是在网页应用、React Native移动应用、Electron桌面应用中，还是文档网站上使用，都无需为每个环境重新编写代码。

下图展示了同一个设计系统如何应用于三种不同的应用程序类型：所有这些应用都仅依赖同一个包进行导入，因此能够保证样式、行为和可访问性等方面保持一致：

无论是网页应用、桌面应用还是移动应用，这种设计系统都适用于所有这些场景。

你应该选择使用单仓库架构吗？

并不是每个团队都需要使用单仓库架构。但如果你正在构建一个需要为多款应用程序服务、能在不同平台上保持一致性，并且需要支持大量开发者的设计系统，那么单仓库架构就不仅仅是一个时髦的概念，而是一种能够提升开发效率的实用工具。

在什么情况下单仓库架构并不适合

首先需要澄清一点：单仓库架构有时会与另一个讨论话题被混淆。“单仓库架构与多仓库架构”的问题，并不等同于“单体应用与微服务”的问题。实际上，你完全可以在单仓库架构中实现微服务架构（谷歌和Facebook就是在这种架构模式下大规模运作的）。

这两种选择属于不同的范畴：单仓库与多仓库的区分在于代码的存储方式，而单体应用与微服务的区别则在于运行时的架构设计。

明确了这一点之后，以下是一些说明，表明单仓库可能并不适合你的实际情况：

• 如果你们是一个只开发一个产品的小型团队，单仓库所带来的工具管理开销（如工作区配置、构建流程、包的分割等）可能会带来更多的麻烦，其带来的好处可能远不如这些开销。对于一个没有共享库的简单React应用来说，单仓库可能并不是必要的。

• 如果你的各个项目包的发布频率或相关方需求差异很大，使用单独的仓库会更有帮助。因为不同团队可能需要完全不同的部署流程、管理机制或安全策略，将它们分开存储可以有效减少冲突。

• 如果你没有足够的时间和资源来投入单仓库相关的工具开发，那么这些工具可能会成为你的瓶颈。像Turborepo、Nx这样的工具虽然能提升效率，但学习和使用成本都不低。如果你的团队无法专门投入时间来配置和维护这些工具，使用单仓库可能会带来很多麻烦。

• 如果你使用的编程语言或运行时环境之间不兼容，单仓库的优势就会大打折扣。当大多数包都使用相同的工具链时，单仓库才能发挥最大的作用。但如果在一个仓库中同时使用Node.js、Go、Rust和Python等不同语言，构建流程会变得非常复杂。

对于大多数正在构建复杂设计系统的团队来说，以上这些因素都不是决定性因素。但在最终决定之前，仔细评估自己的实际情况还是很有必要的。

让我们一起来构建我们的设计系统吧

创建你的Turborepo项目

首先，创建一个新的Turborepo项目。这将为你搭建一个可扩展的单仓库基础。

# 创建一个新的Turborepo项目
npx create-turbo@latest my-design-system

# 进入项目目录
cd my-design-system

# 安装依赖项
npm install

Turborepo会创建一个包含apps/和packages/文件夹的工作区，同时提供共享的工具配置和优化的构建流程。

设计你的包结构

接下来，为你的设计系统包创建一个合理的层次结构。可以将其想象成梯子，每一层都是建立在下一层的基础之上的。

my-design-system/
├── packages/
│   ├── tokens/          # 设计元素样式（颜色、间距、字体）
│   ├── primitives/      # 基础组件（按钮、输入框、卡片）
│   ├── layouts/         # 布局组件（网格布局、堆叠布局、容器）
├── apps/
│   ├── web/            # 示例Web应用
│   └── docs/           // 文档网站
└── turbo.json          # Turborepo配置文件

详细的文件结构

my-design-system/
├── packages/
│   ├── tokens/
│   │   ├── src/
│   │   │   ├── colors.ts
│   │   │   ├── spacing.ts
│   │   │   ├── typography.ts
│   │   │   └── index.ts
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── primitives/
│   │   ├── src/
│   │   │   ├── Button/
│   │   │   │   └── Button.tsx
│   │   │   ├── Input/
│   │   │   │   └── Input.tsx
│   │   │   └── index.ts
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── layouts/
│   │   ├── src/
│   │   │   ├── Grid/
│   │   │   ├── Stack/
│   │   │   └── index.ts
│   │   └── package.json
├── apps/
│   ├── web/
│   │   ├── src/
│   │   │   ├── App.tsx
│   │   │   └── main.tsx
│   │   ├── index.html
│   │   └── package.json
│   └── docs/
│       ├── src/
│       └── package.json
├── turbo.json
├── package.json
└── README.md

构建你的设计令牌包

首先从基础开始：设计令牌。令牌是设计系统中最小且最可复用的单位，比如颜色值、间距大小、字体尺寸或边框半径。与其在所有地方都硬编码 padding: 16px 或 color: #3b82f6，不如使用像 spacing.md 或 colors.primary[500] 这样的令牌。

这样做的好处显而易见：

• 只需在一个地方修改数值即可：只需更新一次令牌，所有使用该令牌的组件都会自动更新。

• 主题设置变得非常简单：想要切换到深色模式？只需更改对应令牌所代表的数值即可。

• 跨平台一致性：相同的令牌名称在网页CSS、原生样式甚至Figma中都能使用。

令牌就是你的设计系统的“DNA”。让我们开始构建它们吧。

# 创建令牌包
mkdir -p packages/tokens/src
cd packages/tokens

请在您的packages/primitives/src/Button Button.tsx文件中更新这些内容：

import React from 'react';
import { colors, spacing } from '@yourds/tokens';

return (

);
};


请在您的 `packages/primitives/src/index.ts` 文件中更新这些内容：

export { Button } from './Button/Button';
export type { ButtonProps } from './Button/Button';

配置 Turborepo 流程

现在，请在 `turbo.json` 文件中设置构建流程，以确保包能够按正确的顺序进行编译。

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "type-check": {
      "dependsOn": ["^build"]
    }
  }
}

构建 @yourds 包

在定义了 tokens 和 primitives 包之后，下一步就是将它们编译成可供应用程序使用的形式。

在项目根目录下运行 `npm install` 命令，可以解决所有依赖关系问题，包括 `@yourds/tokens` 与 `@yourds/primitives` 之间的内部关联。接着运行 `npm run build`，Turborepo 会按正确的顺序执行每个包的编译任务：由于 primitives 包依赖于 tokens 包，因此 tokens 会先被编译。最后再次运行 `npm install`，这样编译完成的包就会被注册到系统中，从而可以让 `apps/web` 应用程序通过名称来导入这些包：

# 进入单体仓库的根目录
npm install

# 按正确的顺序编译每个包
npm run build

# 注册编译完成的包供应用程序使用
npm install @yourds/tokens @yourds/primitives

如果所有操作都成功完成，您应该会在 `packages/tokens` 和 `packages/primitives` 目录下看到一个 `dist/` 文件夹，其中包含了编译后的 JavaScript 代码文件以及 TypeScript 声明文件。

在应用程序中使用您的设计系统

现在您可以在任何 React 应用程序中使用这个设计系统了。

下面的示例会替换您 `apps/web/src/App.tsx` 文件中的默认内容，生成一个简单的首页，该页面同时展示了两点：一是从 `@yourds/primitives` 中导入 primitives 类型（例如 `Button` 组件）；二是直接从 `@yourds/tokens` 中导入 tokens 类型（如 `colors`、`spacing`），用于为标准的 HTML 元素（比如 `

` 和 `

`）设置样式。

最终得到的页面能够完整地运用您的设计系统，且没有任何硬编码的颜色或间距值：

import { Button } from "@yourds/primitives";
import { colors, spacing } from "@yourds/tokens";

export default function Home() {
  return (
    
使用设计系统的我的应用

开始使用 了解更多