搭建前端脚手架（上）

npm create vue@latest

# 创建文件夹并进入
mkdir create-lucky && cd create-lucky
# 初始化 package.json 和 index.js
npm init -y && nano index.js
# 然后我们在 index.js 输入如下代码，注意 第一行必须是 #!/usr/bin/env node
#!/usr/bin/env node

console.log("Hello from create-lucky!");

# 为了让 index.js 文件可以被执行，需要添加执行权限，然后我们运行
chmod +x index.js

# 然后我们需要修改一下 package.json
"main": "src/index.js",
"bin": {
  "create-lucky": "src/index.js"
},

# 本地测试，我们运行 npm link
npm link

# 在任意目录下，运行以下命令来测试脚手架
npm create lucky

# 发布1，先检查 npm register 是否为：https://registry.npmjs.org/
npm get registry

# 发布2，如果没有注册 npm 账号，需要先注册，根据提示你输入用户名、密码和邮箱。
npm login

# 发布3，发布到 npm
npm publish

# 检查发布是否成功，可能有十秒延迟，我们去 https://www.npmjs.com/~luckysnail ，这里 luckysnail 是你的 npm 账号名

# 本地运行 npm create lucky ，验证效果

# 引入 inquirer：命令行界面与用户交互的库
npm i inquirer
# 更新 src/index.js 代码

#!/usr/bin/env node

const inquirer = require("inquirer");

async function main() {
  const answers = await inquirer.default.prompt([
    {
      type: "list",
      name: "template",
      message: "请选择你想要使用的模板:",
      choices: ["Vue", "React", "React19", "NextJs"],
    },
    {
      type: "input",
      name: "customUrl",
      message: "请输入项目名称:",
    },
  ]);

  let packageUrl = "";
  if (answers.template === "custom-app") {
    packageUrl = answers.customUrl;
  } else {
    packageUrl = `https://github.com/your-org/${answers.template}`;
  }

  console.log(`你选择的包地址是: ${packageUrl}`);
}

main();
# 重新 npm link 然后测试，没有问题，就 publish 再测试一下

# 安装需要的库，chalk：终端字体样式；ora：显示loading动画效果；download-git-repo：下载并提取git仓库
npm i chalk ora download-git-repo

# src/constants.js 定义常量
/** 项目列表 */
export const PROJECT_LIST = [
  {
    name: "vue",
    desc: "vue3 + pinia + vue-router",
    value: "https://github.com/axin-s-Template/vue-light-starter.git",
  },
  {
    name: "React19",
    desc: "React 19 + Tailwind 3 + Biome + RSBuild + shadui/cn 轻量启动模版",
    value: "https://github.com/axin-s-Template/react19-light-starter",
  },
  {
    name: "React",
    desc: "react 轻量模版（适合开发简单应用），使用 Vite + TypeScript + TailwindCss + shadcn/ui + Zustand + react-router-dom 的简单 SPA 启动模版",
    value: "https://github.com/axin-s-Template/react-light-starter",
  },
  {
    name: "NextJs",
    desc: "Next.js 14+ 基础启动模板",
    value: "https://github.com/axin-s-Template/Nextjs-Boilerplate",
  },
];

# 设置 package.json 的 "type": "module",

# 更新 src/index.js
#!/usr/bin/env node

import inquirer from "inquirer";
import chalk from "chalk";
import ora from "ora";
import { promisify } from "util";
import downloadGitRepo from "download-git-repo";
import { PROJECT_LIST } from "./constants.js";

const download = promisify(downloadGitRepo);

async function main() {
  const answers = await inquirer.prompt([
    {
      type: "list",
      name: "template",
      message: "请选择你想要使用的模板:",
      choices: PROJECT_LIST.map((item) => ({
        name: `${item.name} - ${item.desc}`,
        value: item.name.toLowerCase(),
      })),
    },
    {
      type: "input",
      name: "projectName",
      message: "请输入项目名称:",
      validate: (input) => {
        if (!input.trim()) {
          return "项目名称不能为空";
        }
        return true;
      },
    },
  ]);

  const selectedTemplate = PROJECT_LIST.find((item) => item.name.toLowerCase() === answers.template);

  if (!selectedTemplate) {
    console.log(chalk.red("未找到选择的模板"));
    return;
  }

  const spinner = ora("正在下载模板...").start();

  try {
    const repoUrl = selectedTemplate.value.replace("https://github.com/", "").replace(".git", "");
    await download(repoUrl, answers.projectName);
    spinner.succeed(chalk.green("模板下载成功！"));
    console.log(chalk.blue("\n开始使用:"));
    console.log(chalk.cyan(`  cd ${answers.projectName}`));
    console.log(chalk.cyan("  npm install"));
    console.log(chalk.cyan("  npm run dev\n"));
  } catch (err) {
    spinner.fail(chalk.red("下载失败：" + err.message));
    process.exit(1);
  }
}

main().catch((err) => {
  console.error(chalk.red(err));
  process.exit(1);
});