如何在 JavaScript 项目中让 shadcn/ui 不使用 TypeScript【免费下载链接】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在 JavaScript 项目中通过 shadcn/ui 的 CLI 添加组件时默认生成的是.tsx文件无法直接在纯 JS 项目里使用。shadcn/ui 官方明确提供了 JavaScript 版本组件开启方式只有一个components.json里的tsx标志。把它设为falseCLI 就会把组件以.jsx扩展名的 JavaScript 文件写入项目。先了解官方立场JavaScript 文档/javascript.mdx)原文shadcn/ui 项目本身和组件都是用 TypeScript 编写的官方建议你的项目也使用 TypeScript但官方同时提供 JavaScript 版本且该版本只能通过 CLI 获取。前提条件项目已通过 CLI 初始化 shadcn/ui。components.json由npx shadcnlatest init生成init会安装依赖、添加cnutil 并配置项目的 CSS 变量见 CLI 文档/cli.mdx)。已有该文件的项目直接编辑即可。项目已配置 Tailwind CSS 和导入别名。别名需要能被编辑器解析jsconfig.json在 Vite 项目中还需要打包器侧的resolve.alias配置参考 Vite 安装文档 的 Existing Project 部分。在 components.json 中设置 tsx: false编辑项目根目录的components.json将tsx设为false。JavaScript 文档/javascript.mdx)给出的完整示例如下{ style: new-york, rsc: false, tsx: false, tailwind: { config: , css: src/app/globals.css, baseColor: zinc, cssVariables: true }, iconLibrary: lucide, aliases: { components: /components, utils: /lib/utils, ui: /components/ui, lib: /lib, hooks: /hooks } }其中与当前任务直接相关的字段tsxtrue生成 TypeScript 组件false生成 JavaScript 组件。components.json 配置文档/components-json.mdx)原文Setting this option tofalseallows components to be added as JavaScript with the.jsxfile extension.rsc是否启用 React Server Components 支持设为true时 CLI 会自动为客户端组件添加use client指令。非 Next.js 项目按文档示例使用false。aliasesCLI 依赖它决定把生成的components、ui、lib、hooks、utils放在哪里并改写 import使用 CLI 时必须保留。tailwind.css指向你项目实际导入 Tailwind 的全局 CSS 文件示例中的src/app/globals.css需替换为自己的路径tailwind.config在 Tailwind CSS v4 中留空。用 jsconfig.json 配置导入别名JavaScript 项目没有tsconfig.json文档给出的对应做法是创建jsconfig.jsonJavaScript 文档/javascript.mdx){ compilerOptions: { paths: { /*: [./*] } } }components.json 配置文档/components-json.mdx)说明aliases可以由tsconfig.json或jsconfig.json的compilerOptions.paths提供解析支持如果你用的是package.json#imports方案则保持#...别名与components.json中的aliases一致即可。若项目此前已配置好别名可跳过本步只保留tsx: false的改动。添加组件并验证npx shadcnlatest add button验证方式依据 components.json 配置文档/components-json.mdx)的说明tsx: false后添加的组件是带.jsx扩展名的 JavaScript 文件。检查aliases.ui指向的目录上面示例为/components/ui新增的应是button.jsx而不是button.tsx。写入磁盘前想先预览变更可以使用--dry-runnpx shadcnlatest add button --dry-run该选项只预览变更、不写入文件。组件添加后按别名导入使用Vite 安装文档中的用法示例import { Button } from /components/ui/button限制与注意事项官方推荐仍是 TypeScriptJavaScript 版本是官方明确提供的选项而非替代方案。style、tailwind.baseColor、tailwind.cssVariables初始化后不能更改要切换cssVariables与否文档给出的办法是删除组件并重新安装。components.json仅在通过 CLI 添加组件时必需使用 copy and paste 方式则不需要该文件。之前已以tsx: true添加过组件、想改回 JS 版本的项目文档没有专门的转换命令可以把tsx改为false后执行npx shadcnlatest init --reinstall--reinstall选项的作用是重新安装已有的 UI 组件。若需要覆盖已有配置init提供-f, --force选项强制覆盖。完成后即可继续用npx shadcnlatest add [component]添加其余组件所有新增文件均按tsx当前取值生成扩展名。【免费下载链接】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），仅供参考