菜单

开发工作流

相关源文件

本文档涵盖了 shadcn/ui 系统本身的贡献者开发工作流程,重点介绍了 CLI 如何检测和管理不同的项目类型、处理依赖安装以及在开发和分发过程中处理组件文件。

有关作为最终用户使用 CLI 工具的信息,请参阅 CLI 工具。有关构建和发布系统的详细信息,请参阅 构建和发布

项目检测与管理

shadcn/ui CLI 包含复杂的项目检测功能,可自动识别框架类型、项目结构和配置设置。这使得 CLI 能够提供适当的默认值并处理特定于框架的要求。

框架检测系统

项目检测系统会分析目标目录以确定框架和项目特性。

来源:packages/shadcn/src/utils/get-project-info.ts42-151 packages/shadcn/src/utils/frameworks.ts1-85

项目信息收集

getProjectInfo 函数收集有关目标项目的全面信息。

属性检测方法目的
框架配置文件模式和依赖项特定于框架的文件处理
isSrcDirfs.pathExists("src")目录结构检测
isRSCApp 目录存在(Next.js)React Server Components 支持
isTsxisTypeScriptProject()TypeScript 与 JavaScript 的处理
tailwindConfigFilefg.glob("tailwind.config.*")Tailwind 配置位置
tailwindCssFileCSS 文件内容扫描Tailwind 导入检测
tailwindVersion包版本分析v3 与 v4 的兼容性
aliasPrefixTypeScript 配置解析导入别名配置

来源:packages/shadcn/src/utils/get-project-info.ts15-26 packages/shadcn/src/utils/get-project-info.ts42-68

Tailwind 版本检测

系统检测 Tailwind CSS 版本以处理兼容性差异。

来源:packages/shadcn/src/utils/get-project-info.ts153-184

依赖管理系统

依赖管理系统处理包安装,并特别考虑 React 19 的兼容性以及不同的包管理器。

包管理器检测和执行

updateDependencies 函数负责完整的依赖安装工作流程。

来源:packages/shadcn/src/utils/updaters/update-dependencies.ts10-99

React 19 兼容性处理

系统为 React 19 对等依赖冲突提供了特殊处理。

包管理器React 19 行为flag 处理
npm显示 ERESOLVE 错误提示使用 --force--legacy-peer-deps
pnpm仅显示警告无需 flag
bun仅显示警告无需 flag
yarn仅显示警告无需 flag
deno使用 npm: 前缀无需 flag

React 19 检测使用正则表达式对 package.json 依赖进行匹配。

来源:packages/shadcn/src/utils/updaters/update-dependencies.ts101-109 apps/www/content/docs/react-19.mdx19-175

文件处理和转换

文件处理系统处理组件安装、导入解析和代码转换,以匹配项目配置。

文件更新管道

来源:packages/shadcn/src/utils/updaters/update-files.ts23-235

导入解析和转换

导入转换系统处理别名解析和注册表导入。

来源:packages/shadcn/src/utils/transformers/transform-import.ts4-104

文件路径解析

resolveFilePath 函数根据注册表类型和项目结构确定文件安装位置。

注册表类型目标目录解析
registry:uiconfig.resolvedPaths.ui
registry:libconfig.resolvedPaths.lib
registry:componentconfig.resolvedPaths.components
registry:blockconfig.resolvedPaths.components
registry:hookconfig.resolvedPaths.hooks
registry:page特定于框架的页面目录

来源:packages/shadcn/src/utils/updaters/update-files.ts237-292

框架集成

系统为不同的项目类型和页面路由模式提供了特定于框架的处理。

页面目标解析

对于 registry:page 类型,系统会根据目标框架转换路径。

路径转换示例

框架输入路径输出路径
next-appapp/login/page.tsxapp/login/page.tsx
next-pagesapp/login/page.tsxpages/login.tsx
react-routerapp/login/page.tsxapp/routes/login.tsx
laravelapp/login/page.tsxresources/js/pages/login.tsx

来源:packages/shadcn/src/utils/updaters/update-files.ts357-391

项目配置生成

getProjectConfig 函数根据检测到的项目特性生成适当的配置。

来源:packages/shadcn/src/utils/get-project-info.ts316-336

测试与验证

开发工作流程包括对文件操作、依赖管理和导入解析进行全面测试。

测试覆盖区域

测试套件重点领域关键测试用例
update-files.test.ts文件路径解析目标解析、框架处理、嵌套路径
update-dependencies.test.ts依赖安装包管理器检测、React 19 flag、去重
项目 fixture框架检测各种项目类型和配置

测试 fixture 包括不同包管理器和 React 版本的示例。

  • project-npm/ - 标准 npm 项目
  • project-npm-react19/ - 带有 React 19 的 npm,用于测试对等依赖处理
  • project-deno/ - Deno 项目配置
  • project-bun/ - Bun 包管理器
  • project-pnpm/ - pnpm 工作区

来源:packages/shadcn/test/utils/updaters/update-files.test.ts1-1112 packages/shadcn/test/utils/updaters/update-dependencies.test.ts1-139

模块解析测试

resolveModuleByProbablePath 函数包含对导入解析边缘情况的广泛测试。

来源:packages/shadcn/test/utils/updaters/update-files.test.ts816-916 packages/shadcn/src/utils/updaters/update-files.ts493-563