@vemic/frontend-init

前端工程师环境快速初始化工具 - 一条命令快速搭建开发环境

功能特性

• ✅ 快速启动: 一条命令完成环境配置
• ✅ 灵活选择: 支持基于现有仓库或模板仓库初始化
• ✅ 代码复制: 模板和技能代码直接复制到用户仓库，无 Git 依赖
• ✅ 安全隔离: 自动创建独立分支，避免误提交到原仓库
• ✅ 自动检测: 自动检测包管理器（npm/yarn/pnpm）

安装

# 全局安装
npm install -g @vemic/frontend-init

# 或使用 pnpm
pnpm add -g @vemic/frontend-init

# 或使用 yarn
yarn global add @vemic/frontend-init

使用

方式 1：基于现有仓库初始化

frontend-init

# 或使用简短命令
fi

交互提示：

? 请选择您的初始化方式： 有现有项目仓库
? 请输入您的 Git 仓库地址： https://git.vemic.com/user/my-project.git
? 请输入基础分支名称： develop
? 请输入您的用户名（用于分支命名）： zhangsan

工具会自动：

1. 克隆您的业务仓库
2. 下载并复制 tw2scss 技能到 .claude/skills/tw2scss
3. 创建独立分支 dev/zhangsan/<timestamp>
4. 安装依赖
5. 启动开发服务器

方式 2：基于模板仓库初始化

frontend-init

交互提示：

? 请选择您的初始化方式： 使用模板仓库创建新项目
? 请选择项目模板： 通用前端模板
? 请输入项目名称： my-awesome-project
? 请输入您的用户名（用于分支命名）： zhangsan
? 请输入远程仓库地址（可选）： https://git.vemic.com/zhangsan/my-awesome-project.git

工具会自动：

1. 下载模板并创建项目
2. 下载并复制技能到 .claude/skills/general-frontend
3. 初始化 Git 仓库
4. 创建独立分支 dev/zhangsan/<timestamp>
5. 推送到远程（如果配置了）
6. 安装依赖
7. 启动开发服务器

命令选项

# 查看版本
frontend-init --version

# 查看帮助
frontend-init --help

工作原理

代码复制机制

工具使用临时克隆 + 复制的方式，不会创建 Git submodule：

# 1. 临时克隆到 /tmp
git clone <skill-repo> /tmp/skill-temp-xxxxx

# 2. 复制代码（排除 .git）
cp -r /tmp/skill-temp-xxxxx .claude/skills/skill-name
rm -rf .claude/skills/skill-name/.git

# 3. 清理临时目录
rm -rf /tmp/skill-temp-xxxxx

分支管理

• 现有仓库：基于指定分支创建 dev/<username>/<timestamp> 分支
• 模板仓库：创建独立的 Git 仓库和分支
• 所有代码提交到用户的独立分支

最终目录结构

my-project/
├── src/                    # 业务代码
├── package.json
├── .git/                   # 用户的 Git 仓库
└── .claude/
    └── skills/
        └── tw2scss/        # 技能代码（已复制，无独立 .git）
            ├── skill.md
            ├── api.ts
            └── ...

技术栈

• Node.js >= 16
• TypeScript
• Commander.js - CLI 框架
• Inquirer.js - 交互式提示
• Chalk - 终端色彩
• Ora - 加载动画
• Execa - 进程执行

开发

# 克隆仓库
git clone <repository-url>
cd frontend-init

# 安装依赖
npm install

# 构建
npm run build

# 本地测试
npm link
frontend-init

发布

# 构建
npm run build

# 发布到 npm
npm publish --access public

常见问题

Q: 为什么不用 Git submodule？

A: Submodule 会增加复杂度，使用复制方式更简单直接，用户可以自由修改技能代码。

Q: 如何更新技能代码？

A: 技能代码已经复制到您的项目中，可以直接在 .claude/skills/ 目录下修改。

Q: 临时目录会自动清理吗？

A: 是的，工具会在完成后自动清理所有临时目录。

许可证

MIT

支持

如有问题，请联系 Vemic AI Team。