如何用 package.json imports 配置 shadcn/ui 的 # 导入别名替代 tsconfig paths【免费下载链接】uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.项目地址: https://gitcode.com/GitHub_Trending/ui/ui如果你的 shadcn/ui 项目目前依赖tsconfig.json里的compilerOptions.paths例如/components/...来做导入别名这篇文档介绍如何改用package.json的 package imports/package-imports.mdx) 机制在package.json中声明以#开头的私有导入别名如#components/*让 shadcn CLI 安装组件、重写导入、解析第三方 registry 时都走这套#...别名不再维护一份paths映射。该支持从shadcn4.7.0开始提供见 2026 年 5 月的更新记录适用于将组件安装到同一 workspace 的 Next.js、Vite 和 TanStack Start 应用。前提条件项目已通过npx shadcnlatest init初始化存在components.json。CLI 依赖其中的aliases决定生成组件的落盘位置和导入重写规则见 components.json 文档/components-json.mdx)。使用 TypeScript 5 或更高版本。导入说明符必须以#开头且解析需要开启moduleResolution: bundler与resolvePackageJsonImports: true。在 package.json 中声明 imports单包应用的主路径。如果你的源码放在src/目录目标路径带上src/前缀{ imports: { #components/*: ./src/components/*.tsx, #lib/*: ./src/lib/*.ts, #hooks/*: ./src/hooks/*.ts } }如果项目没有src/目录把目标中的src/去掉即可{ imports: { #components/*: ./components/*.tsx, #lib/*: ./lib/*.ts, #hooks/*: ./hooks/*.ts } }这些条目必须写在组件所在包对应的、离组件最近的package.json里这是后文排查解析失败时会用到的第一条检查项。在 tsconfig.json 中启用 package imports 解析开启包导入解析并移除对这些别名来说已经不再需要的compilerOptions.paths{ compilerOptions: { moduleResolution: bundler, resolvePackageJsonImports: true } }注意文档明确说明启用 package imports 后不需要compilerOptions.paths来覆盖这些#...别名但components.json里的aliases仍然必须保留因为 CLI 靠它知道components、ui、lib、hooks、utils分别映射到哪个导入根而package.json#imports负责提供这些#...说明符的运行时与 TypeScript 解析。在 components.json 中使用同一套 # 别名{ aliases: { components: #components, ui: #components/ui, lib: #lib, hooks: #hooks, utils: #lib/utils } }两个细节可以避免多写条目ui别名使用#components/ui它仍然被package.json中的#components/*条目覆盖不需要单独的#components/uiimports 键。utils别名使用#lib/utils被#lib/*覆盖因此不需要单独的#utils导入。配置完成后安装组件并按#...说明符导入import { Button } from #components/ui/button import { cn } from #lib/utils目标模式决定生成的导入是否带文件扩展名package.json#imports的目标写法直接控制 CLI 生成的#...导入是否包含文件扩展名imports 目标写法生成的导入#components/*: ./src/components/*.tsximport { Button } from #components/ui/button#components/*: ./src/components/*import { Button } from #components/ui/button.tsx目标带扩展名时生成不带扩展名的导入目标不带扩展名时生成保留源码扩展名的导入。文档建议大多数应用采用带扩展名的目标模式。验证与排查安装组件后验证方式是查看生成组件中的导入语句是否使用了#...说明符并指向实际文件。如果 TypeScript 无法解析某个#...导入按文档顺序逐项检查说明符是否以#开头imports条目是否位于离文件最近的package.json中moduleResolution是否为bundlerresolvePackageJsonImports是否已启用组件添加完成后匹配的目标文件是否真实存在。另一种典型现象组件已经安装但导入仍然指向/...。此时检查components.json是否使用了与package.json#imports相同的#...别名——两边别名不一致时CLI 的重写会回落到旧的 paths 风格导入。可选分支monorepomonorepo 中包内文件用 package imports 处理跨 workspace 共享的文件改用包exports。例如apps/web/package.json声明本地#components/*、#lib/*、#hooks/*并把workspace/ui作为 workspace 依赖packages/ui/package.json则在自己的imports之外再加一组exports./components/*、./lib/*等供其他 workspace 消费。从apps/web执行add时应用本地文件使用#...导入共享 UI 文件从workspace/ui导入import { Button } from workspace/ui/components/button import { LoginForm } from #components/login-form完整的 workspace 配置见 monorepo 文档/monorepo.mdx)。参考package imports 指南/package-imports.mdx)本文主路径的完整出处含单包应用与 monorepo 两套配置components.json/components-json.mdx)aliases与 paths / package imports 两种支撑方式的关系2026-05 更新记录package imports 支持引入的版本说明【免费下载链接】uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.项目地址: https://gitcode.com/GitHub_Trending/ui/ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考