npm发布脚手架流程

一、项目结构

先创建一个脚手架目录，例如：

react-ele-cli
├── bin
│   └── index.js     # 脚手架入口文件（可执行命令）
├── package.json
└── README.md

二、编写 CLI 入口文件

bin/index.js

这个文件就是你执行 react-cli create my-app 最终执行的代码。

例如下面的示例：

#!/usr/bin/env node
const { program } = require("commander");
const download = require("download-git-repo");
const inquirer  = require("inquirer")

async function create(projectName) {
  // 第一步：交互选择
  const answers = await inquirer.prompt([
    {
      type: "list",
      name: "template",
      message: "请选择项目模板",
      choices: [
        { name: "Vite + React", value: "vite-react" },
        { name: "Webpack5 + React", value: "webpack5-react" },
        { name: "Vue3 + Vite", value: "vue3-vite" }
      ]
    },
    {
      type: "list",
      name: "pkgTool",
      message: "请选择依赖安装方式",
      choices: ["npm", "yarn", "pnpm"]
    }
  ]);

  console.log("你选择的结果：", answers);

  // 根据选择的模板去下载
  const templateRepoMap = {
    "vite-react": "direct:https://github.com/.../ReactProject.git",
    "webpack5-react": "direct:https://github.com/.../ReactProject.git",
    "vue3-vite": "direct:https://github.com/.../ReactProject.git"
  };

  const repo = templateRepoMap[answers.template];

  console.log(`开始生成项目: ${projectName}`);

  download(repo, projectName, { clone: true }, (err) => {
    if (err) {
      console.log("下载失败", err);
    } else {
      console.log("项目创建成功");

      console.log(`
    下一步操作：
    $ cd ${projectName}
    $ ${answers.pkgTool} install
    $ ${answers.pkgTool} run dev
      `);
    }
  });
}


program
  .command("create <project>").description("请选择项目模板")
  .description("创建一个项目")
  .action((project) => {
    create(project);
  });

program.parse(process.argv);

需要注意的是，更换自己发布在github的模板地址，当然也可以是发布在其他地方的模板如下。比如gitlab等公开的模板资源。

① Git 仓库模板（推荐）

② 远程 ZIP（axios 下载后解压）

③ 脚手架内置 template 文件夹（简单）

三、配置 package.json

{
  "name": "react-cli",
  "version": "1.0.0",
  "description": "发布npm脚手架文件",
  "main": "index.js",
  "bin": {
    "react-cli": "bin/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "commander": "^14.0.2",
    "download-git-repo": "^3.0.2"
  }
}

bin 字段代表安装后生成的全局命令，这个自己来取，名字就是：

react-cli

在开发期间你可以本地全局链接：npm link

然后测试：react-cli my-app

四、发布到 npm

登陆 npm

npm login

会出现下面，回车就可打开浏览器登录npm，前提是已经注册过npm。

注意到是使用了淘宝镜像源，这时候是发布不到npm官网的，需要切换官方镜像源。

如果你是要发布真正 npm 包，建议先切回官方 registry：
npm config set registry https://registry.npmjs.org/
查看当前镜像源：npm config get registry

然后：
npm login
npm publish

发布完成之后可以切回淘宝镜像源：npm config set registry https://registry.npmmirror.com/

发布结果如下则是发布成功，同步在淘宝镜像源也可以全局安装使用：