一个简洁高效的 CLI 工具，帮助你快速生成 React 组件。支持 JavaScript (JSX) 和 TypeScript (TSX)，并自动创建配套的 CSS Module 文件。
- 🚀 快速生成 React 组件
- 💪 支持 JavaScript (JSX) 和 TypeScript (TSX)
- 🎨 自动创建 CSS Module 文件
- ⚙️ 可配置的组件模板
- 📁 自定义组件存放目录
- 🎯 交互式命令行界面
# 全局安装
npm install -g new-compgen
# 或者使用 yarn
yarn global add new-compgennew-compgen运行命令后，按照提示进行操作：
- 输入组件名称（必须以大写字母开头）
- 选择开发语言（JavaScript 或 TypeScript）
- 指定组件存放目录（默认为 src/components）
$ new-compgen
? 请输入组件名称: Button
? 请选择开发语言: TypeScript (TSX)
? 请输入组件存放目录: src/components
✨ Creating the Button component ✨
Directory: src/components/Button
Language: TypeScript
=========================================
✓ 目录已创建。
✓ 组件文件已创建。
✓ 样式文件已创建。
Component created!对于 TypeScript 组件： src/components/YourComponent/ ├── index.tsx └── index.module.css
对于 JavaScript 组件： src/components/YourComponent/ ├── index.jsx └── index.module.css
你可以通过创建配置文件来自定义默认行为：
创建文件 ~/.new-compgen-config.json：
{
"lang": "ts",
"dir": "src/components"
}在项目根目录创建 new-compgen-config.json：
{
"lang": "js",
"dir": "src/components"
}配置优先级：
- 项目级配置
- 全局配置
- 默认配置
模板文件位于 src/templates 目录：
js.js- JavaScript 组件模板ts.js- TypeScript 组件模板style.css- CSS Module 模板
你可以根据需要修改这些模板文件。
# 克隆仓库
git clone https://github.com/yourusername/new-compgen.git
# 安装依赖
cd new-compgen
npm install
# 本地链接
npm link
# 测试
new-compgen- commander - 命令行界面
- inquirer - 交互式命令行
- chalk - 终端样式
- prettier - 代码格式化
ISC
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的修改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开一个 Pull Request
bianxuerui
感谢所有为这个项目做出贡献的开发者！