Radix UI Primitives 搭建与使用指南

Radix UI Primitives 搭建与使用指南

primitivesRadix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.项目地址:https://gitcode.com/gh_mirrors/pr/primitives

1. 项目目录结构及介绍

Radix UI Primitives 的源代码目录结构如下：

├── packages                  # 包含各个组件和样式库的源代码包
│   ├── radix-primitive-*    # 不同组件的源码
├── scripts                   # 构建和开发脚本
├── stories                    # Storybook 示例代码
├── .gitignore                # git 忽略文件配置
├── package.json               # 项目顶级依赖和配置
└── README.md                  # 项目简介

• packages: 存放项目的所有组件源代码，例如 radix-primitive-button, radix-primitive-input 等。
• scripts: 包含构建、测试和发布等自动化任务的脚本。
• stories: 使用 Storybook 提供的组件示例代码，用于展示和测试组件的不同状态。
• package.json: 项目的基本信息，包括依赖、脚本命令等。
• README.md: 项目的一般性说明和指南。

2. 项目的启动文件介绍

项目没有提供一个传统的单一入口点文件（如 index.js），因为它是以模块化的方式组织的。不过，如果你想要本地开发或预览组件，可以运行以下脚本来启动 Storybook：

# 安装开发依赖
npm install
# 启动 Storybook
npm run storybook

这将打开一个本地服务器，显示所有组件的交互式演示。

3. 项目的配置文件介绍

主要的配置文件位于根目录下的 package.json，其中包含了项目元数据、依赖以及开发相关的脚本。例如：

{
  "name": "@radix-ui/primitives",
  "version": "0.0.0-development",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ]
  },
  "peerDependencies": { /* ... */ },
  "devDependencies": { /* ... */ },
  "scripts": {
    "build": "run-s build:*",
    "build:components": "rollup --config scripts/config/components.rollup.config.js",
    // ...
    "storybook": "start-storybook -p 6006",
    "test": "run-s test:*",
    // ...
  }
}

scripts 字段中包含了许多用于构建、测试和开发的脚本，比如 build 和 test 目录下的任务。这些脚本通常由 npm-run-all 或 yarn 自动执行多个任务。

另外，其他重要的配置可能在 scripts/config 文件夹内，如 components.rollup.config.js，这是 Rollup 的配置文件，负责处理组件的打包过程。

在实际开发中，还需要根据项目需求和团队规范，查阅具体的 Readme 或者项目内部文档来获取更详细的配置信息。

primitivesRadix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.项目地址:https://gitcode.com/gh_mirrors/pr/primitives