如何用 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> <ComponentName>ComponentType填组件所属分类。仓库现有 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.css | JS-CSS |
src/tailwind/TextAnimations/MyWidget/ | MyWidget.jsx | JS-TW |
src/ts-default/TextAnimations/MyWidget/ | MyWidget.tsx、MyWidget.css | TS-CSS |
src/ts-tailwind/TextAnimations/MyWidget/ | MyWidget.tsx | TS-TW |
src/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}.css，TS-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/.tsx（CSS 变体目录另有.css）；src/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+.css，JS-TW 用src/tailwind下的.jsx，TS-CSS 用src/ts-default下的.tsx+.css，TS-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），仅供参考
