如何开发可配置主/辅色的Next.js 13项目初始化CLI？

1. 确定技术栈 #

直接基于Node.js开发CLI，核心依赖选这些：

• commander.js：处理命令行参数与命令定义
• inquirer.js：实现交互式用户输入（收集项目名、颜色值）
• fs-extra：比原生fs更易用的文件读写/修改工具
• cross-spawn：跨平台执行shell命令（调用官方的create-next-app）

2. 初始化CLI项目 #

新建空文件夹，执行以下命令：

npm init -y
npm install commander inquirer fs-extra cross-spawn

修改package.json，添加bin字段指定CLI入口：

"bin": {
  "next-color-init": "./bin/cli.js"
}

3. 核心功能实现 #

3.1 编写CLI入口文件（bin/cli.js）

开头加shebang标识执行环境，然后实现完整流程：

#!/usr/bin/env node
const { Command } = require('commander');
const inquirer = require('inquirer');
const spawn = require('cross-spawn');
const fs = require('fs-extra');

const program = new Command();

program
  .name('next-color-init')
  .description('快速生成带自定义Tailwind颜色的Next.js 13项目')
  .action(async () => {
    // 交互式收集用户输入
    const answers = await inquirer.prompt([
      {
        type: 'input',
        name: 'projectName',
        message: '输入项目名称:',
        default: 'my-color-app'
      },
      {
        type: 'input',
        name: 'primaryColor',
        message: '输入主色Hex值（比如#165DFF）:',
        validate: (input) => /^#([0-9A-F]{3}){1,2}$/i.test(input) || '请输入合法的Hex颜色值'
      },
      {
        type: 'input',
        name: 'secondaryColor',
        message: '输入辅助色Hex值（比如#FF7D00）:',
        validate: (input) => /^#([0-9A-F]{3}){1,2}$/i.test(input) || '请输入合法的Hex颜色值'
      }
    ]);

    // 1. 调用官方命令生成带Tailwind的Next.js项目
    const spawnResult = spawn.sync('npx', [
      'create-next-app@latest',
      answers.projectName,
      '--typescript',
      '--tailwind',
      '--app',
      '--no-eslint',
      '--no-src-dir',
      '--import-alias',
      '@/*',
      '--yes'
    ], { stdio: 'inherit' });

    if (spawnResult.status !== 0) {
      console.error('生成Next.js项目失败');
      process.exit(1);
    }

    // 2. 修改Tailwind配置文件，替换自定义颜色
    const tailwindConfigPath = `${answers.projectName}/tailwind.config.ts`;
    let tailwindConfig = await fs.readFile(tailwindConfigPath, 'utf8');

    const customColors = `
      colors: {
        primary: '${answers.primaryColor}',
        secondary: '${answers.secondaryColor}',
        white: '#ffffff',
        black: '#000000'
      },
    `;
    // 替换模板默认的colors配置块
    tailwindConfig = tailwindConfig.replace(/colors: {[^}]+}/, customColors);

    await fs.writeFile(tailwindConfigPath, tailwindConfig);

    console.log('✅ 项目生成完成！现在可直接使用bg-primary、text-secondary等Tailwind类');
  });

program.parse();

3.2 关键细节处理

• 颜色合法性校验：用正则过滤无效Hex值，避免生成错误的Tailwind配置
• 跨平台兼容：用cross-spawn替代原生child_process.spawn，确保Windows/macOS/Linux都能正常运行
• 模板参数自定义：create-next-app的参数可按需调整（比如是否启用ESLint、是否用JavaScript等），加--yes跳过交互式确认

4. 本地测试与发布 #

4.1 本地测试

执行npm link将CLI链接到全局，然后直接运行命令测试：

next-color-init

按提示输入信息后，检查生成项目的tailwind.config.ts是否已替换为自定义颜色。

4.2 发布到npm

若要分享给他人，确保拥有npm账号且项目名未被占用，执行：

npm publish

可选优化方向 #

• 支持生成主色的多阶深浅值（用Tailwind颜色工具自动计算）
• 允许自定义更多Tailwind配置项（如字体、断点）
• 生成示例页面，直观展示自定义颜色的使用效果

内容的提问来源于stack exchange，提问作者saimarshadd