前端脚手架怎么开发？CLI 工具怎么搭建？

Question

仓乃文 · Accepted Answer

脚手架的核心价值是统一项目结构和开发规范，避免每个项目从零配置。一个完整的脚手架需要处理模板下载、交互式问答、文件渲染和依赖安装四个环节。

项目结构：
```
create-my-app/
├── bin/
│   └── cli.js
├── src/
│   ├── prompt.js
│   ├── download.js
│   ├── render.js
│   └── install.js
├── templates/
│   ├── vue-template/
│   └── react-template/
└── package.json
```

核心实现：
```javascript
#!/usr/bin/env node
const { Command } = require("commander");
const inquirer = require("inquirer");
const fs = require("fs-extra");
const path = require("path");

const program = new Command();

program
  .command("create <project-name>")
  .description("创建新项目")
  .action(async (projectName) => {
    const answers = await inquirer.prompt([
      {
        type: "list",
        name: "template",
        message: "选择项目模板：",
        choices: ["Vue3 + Vite", "React + Vite", "Node.js + Express"],
      },
      {
        type: "confirm",
        name: "typescript",
        message: "是否使用 TypeScript？",
        default: true,
      },
    ]);

const templateDir = path.join(__dirname, "../templates", answers.template);
    const targetDir = path.join(process.cwd(), projectName);
    await fs.copy(templateDir, targetDir);

const pkgPath = path.join(targetDir, "package.json");
    const pkg = await fs.readJson(pkgPath);
    pkg.name = projectName;
    await fs.writeJson(pkgPath, pkg, { spaces: 2 });

const { execSync } = require("child_process");
    execSync("pnpm install", { cwd: targetDir, stdio: "inherit" });

console.log(`项目创建成功！cd ${projectName} && pnpm dev`);
  });

program.parse();
```

package.json 配置：
```json
{
  "name": "create-my-app",
  "version": "1.0.0",
  "bin": {
    "create-my-app": "./bin/cli.js"
  },
  "dependencies": {
    "commander": "^11.0.0",
    "inquirer": "^9.0.0",
    "fs-extra": "^11.0.0"
  }
}
```

补充说明：
- 本地开发时用 npm link 将脚手架链接到全局，即可直接运行 create-my-app
- 模板渲染推荐用 handlebars 或 ejs，支持条件逻辑和变量替换
- 发布到 npm 后，用户可以用 npx create-my-app my-project 直接创建项目
- 高级功能：支持 git init、自动配置 husky、检测端口冲突等