如何用 React Bits 的 new:component 脚本生成新组件的 JS、TS 与 CSS、Tailwind 四变体文件结构【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits在 React Bits 仓库里开发或调整组件时每个组件并不是单个文件而是一套分布在 4 个目录变体JS-CSS、JS-TW、TS-CSS、TS-TW加 demo 与常量文件中的文件组。仓库自带的new:componentnpm 脚本可以一次性把这套目录和空文件骨架创建出来你不需要手动拼路径。这篇文章基于仓库内的 scripts/generateComponent.js、package.json、jsrepo.config.ts 和 CONTRIBUTING.md说明如何执行该脚本、它会创建哪些文件以及如何核对生成结果。前提条件已获取 React Bits 仓库并在仓库根目录工作脚本路径均相对于仓库根目录。环境中有 Node 和 npm。脚本本身只用到 Node 内置模块fs、path、process不依赖第三方包。脚本在 package.json 中注册为new:component: node scripts/generateComponent.js执行命令脚本接受两个位置参数ComponentType和ComponentName。参数不足两个时会直接报错退出npm run new:command ComponentType ComponentName注意正确命令是new:component上面示例仅示意参数占位。按实际写法执行npm run new:component ComponentType ComponentNameComponentType填组件所属分类。仓库现有 4 个分类目录Animations、Backgrounds、Components、TextAnimations分别位于 src/content、src/tailwind、src/ts-default、src/ts-tailwind 下。脚本对任意字符串都会自动创建对应目录mkdirSync递归建目录但只有上述 4 个分类是仓库已有结构。ComponentName是组件名首字母大写例如MyWidget。以现有分类为例完整执行形如npm run new:component TextAnimations MyWidget脚本创建了哪些文件脚本会为 6 个路径位置建目录不存在时递归创建然后创建 8 个空文件。以ComponentType TextAnimations、ComponentName MyWidget为例生成的文件如下位置文件对应变体src/content/TextAnimations/MyWidget/MyWidget.jsx、MyWidget.cssJS-CSSsrc/tailwind/TextAnimations/MyWidget/MyWidget.jsxJS-TWsrc/ts-default/TextAnimations/MyWidget/MyWidget.tsx、MyWidget.cssTS-CSSsrc/ts-tailwind/TextAnimations/MyWidget/MyWidget.tsxTS-TWsrc/demo/TextAnimations/MyWidgetDemo.jsx站点演示入口src/constants/code/TextAnimations/myWidgetCode.js站点代码常量其中 constants 文件名的规则来自脚本componentName首字母转小写后加Code.js后缀即MyWidget生成myWidgetCode.js。这个文件布局不是随意的jsrepo.config.ts 中defineComponent按同样的 4 条路径把组件注册为JS-CSS、JS-TW、TS-CSS、TS-TW四个 registry 变体例如 JS-CSS 指向src/content/{category}/{title}下的{title}.jsx与{title}.cssTS-TW 指向src/ts-tailwind/{category}/{title}下的{title}.tsx。也就是说new:component生成的骨架恰好就是 registry 期望的四变体文件结构。验证生成结果脚本成功时会打印一行日志ComponentName与ComponentType为你实际传入的值Component MyWidget structure created successfully under TextAnimations.看到该行后再检查文件是否落盘且为空文件即可例如ls src/content/TextAnimations/MyWidget/ ls src/tailwind/TextAnimations/MyWidget/ ls src/ts-default/TextAnimations/MyWidget/ ls src/ts-tailwind/TextAnimations/MyWidget/预期每个变体目录中能看到对应名称的.jsx/.tsxCSS 变体目录另有.csssrc/demo/TextAnimations/MyWidgetDemo.jsx与src/constants/code/TextAnimations/myWidgetCode.js也应存在。行为边界与限制只创建空文件不写任何代码脚本对每个文件执行writeFileSync(file, )生成的是 0 字节骨架组件实现需要你自己补齐。不覆盖已有文件每个文件创建前都会判断fs.existsSync(file)同名文件已存在时保持原样。用重复的组件名重跑脚本不会报错但也不会产生新内容容易误以为生成成功重跑前建议先确认目标目录不存在同名文件。社区新组件当前不接受入库CONTRIBUTING.md 明确说明 “New components from the community are currently not being accepted into the library, only component enhancements and bug fixes are open for contributions.” 因此该脚本更适合作为本地开发、功能增强或 bug 修复时的文件骨架工具使用。四变体必须同步修改CONTRIBUTING 要求组件的每次变更都要更新到全部 4 个变体这也是骨架同时覆盖 4 个目录的原因只改其中一个变体会不符合提交要求。生成之后要做什么骨架本身不含逻辑后续步骤是在 4 个变体文件中实现组件JS-CSS 用src/content下的.jsx.cssJS-TW 用src/tailwind下的.jsxTS-CSS 用src/ts-default下的.tsx.cssTS-TW 用src/ts-tailwind下的.tsx。在src/demo/{分类}/{Name}Demo.jsx写演示并在src/constants/code/{分类}/{name}Code.js维护站点代码常量。提交前按 CONTRIBUTING 要求本地验证桌面与移动端效果正常、浏览器控制台无错误。如果你的任务只是增强或修复某个已存在组件通常不需要跑这个脚本直接在上述对应目录中修改现有文件即可脚本只在需要新建文件骨架时使用。【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考