如何创建类似create-react-app的自定义npm脚手架命令

1. 初始化脚手架npm包 #

• 新建空文件夹作为脚手架项目根目录，执行npm init -y生成package.json配置文件，包名直接设置为create-my-own-app，符合npm create命令的命名规范
• 在package.json中新增bin字段，指定自定义命令对应的执行入口文件：

  {
    "name": "create-my-own-app",
    "version": "1.0.0",
    "bin": {
      "create-my-own-app": "./index.js"
    }
  }
  

• 在项目根目录新建入口文件index.js，开头第一行必须添加shebang声明，指定用node执行该文件：

  #!/usr/bin/env node
  // 后续逻辑都写在这里
  

2. 安装脚手架开发依赖 #

你可以按需安装以下常用工具库降低开发成本：

• commander：处理命令行参数、子指令配置
• inquirer：实现命令行交互式提问，可支持用户选择配置项、输入项目名等操作
• fs-extra：扩展原生Node.js的fs能力，内置目录复制、递归创建、文件覆盖判断等常用方法
• chalk（可选）：给命令行输出内容添加颜色，优化提示效果

3. 编写核心执行逻辑 #

核心逻辑按执行顺序分为以下几个部分：

1. 参数校验与冲突检测：先获取用户指定的项目目录名，检测目标目录是否已存在，存在则提示用户是否覆盖，避免误删本地文件
2. 模板复制：提前把你预设的所有配置文件、目录结构（比如src目录、构建工具配置、.gitignore、项目package.json模板等）放在脚手架项目的template文件夹下，使用fs-extra.copySync直接将整个模板目录复制到用户指定的项目路径下
3. 动态内容替换：如果模板里有需要动态修改的内容（比如项目名、依赖版本），可以在模板文件里用占位符标记（比如{{projectName}}），复制完成后用正则匹配替换为用户输入的实际值
4. 自动安装依赖：调用Node.js原生的child_process.spawn方法，切换到新生成的项目目录下执行npm install命令，将子进程的输出流挂载到主进程，用户可以直接看到依赖安装进度
5. 完成提示：依赖安装完成后输出操作指引，告知用户后续启动项目的命令即可

4. 测试与发布 #

• 本地测试：在脚手架项目根目录执行npm link，就可以在本地全局环境生成create-my-own-app命令，找个空目录执行命令就能验证全流程是否正常
• 公共使用：测试无误后执行npm publish将包发布到npm官方仓库，用户不需要提前安装，直接执行npx create-my-own-app或者npm create my-own-app都可以触发脚手架执行，和你预期的使用形式完全一致

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