目标：开发一个可以下载react、vue、trao工程化模版的脚手架

1、搭建项目

目录结构

一般一个脚手架项目的目录

/bin  # ------ 命令执行文件
/lib  # ------ 工具模块
/template # ------ 模板
package.json

npm init

初始化，创建package.json

安装依赖

npm install commander inquirer ora download-git-repo

commander 可以解析脚手架命令和参数，用于处理用户输入的命令，合并多选项，处理短参，等等
inquirer 命令行输入集合，用于和用户进行交互
ora 显示loading动画效果
ownload-git-repo 下载并提取git仓库，用于下载模版

其他常用的库

chalk 可以给终端字体样式
log-symbols 在终端上显示√或× 等图标
open 打开诸如URL，文件，可执行文件之类的东西=
progress 显示进度条

创建命令行文件

根目录下创建bin文件夹，在bin文件夹下创建 hgl-templates-cli.js

#!/usr/bin/env node
//第一行其中#!/usr/bin/env node表示用node解析器执行本文件。
const program = require('commander')
const inquirer = require('inquirer')
const ora = require('ora')
const download = require('download-git-repo')

program
.command('create <projectName>')
.description('create a new project')
.alias('c')
.action((projectName, options) => {
  inquirer
   .prompt([
     {
       type: 'list',
       name: 'frameTemplate',
       message: '请选择框架类型',
       choices: ['Vue3',  'React', 'Trao']
     }
   ])
   .then((answer) => {
      let downloadUrl = ''
      switch (answer.frameTemplate) {
        case 'Vue3':
          downloadUrl='direct:https://github.com/hanguoliangsworld/vue3-ts.git'
          break;
        case 'React':
          downloadUrl='direct:https://github.com/hanguoliangsworld/react-ts.git'
          break;
        case 'Trao':
          downloadUrl='direct:https://github.com/hanguoliangsworld/template-cli.git'
          break;
        default:
          break;
      }

      const spinner = ora()
      spinner.text = '正在下载模板...'
      spinner.start()
      download( downloadUrl, projectName,{ clone: true },function (err) {
          if (err) {
            spinner.fail(err,'模板下载失败')
          } else {
            spinner.succeed('模板下载成功')
          }
        }
      )
   })
})
program.version('1.0.1').parse(process.argv)

package.json 定义命令文件

{
  "name": "hgl-templates-cli",
  "version": "1.0.1",
  "description": "提供react、vue项目模版",
  "bin": {
    "hgl-templates-cli": "./bin/hgl-templates-cli.js"
  },
  "private": false,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xiaozuanfeng",
  "license": "ISC",
  "dependencies": {
    "chalk": "^2.4.2",
    "commander": "^9.4.1",
    "download-git-repo": "^3.0.2",
    "inquirer": "6.2.2",
    "ora": "^3.2.0",
    "rimraf": "^3.0.2"
  },
  "keywords": [
    "cli",
    "react",
    "vue",
    "trao"
  ]
}

2、本地调试

根目录下运行 npm link（npm unlink // 卸载link安装），此时脚手架被安装到全局，可以使用了。

npm link

在其他目录下运行即可

hgl-templates-cli create Test

3、发布

在 npm 官网 www.npmjs.com/ 注册并创建 npm 账号

设置官方源地址

npm config set registry https://registry.npmjs.org/

登陆

npm login

输入账号密码，并输入邮箱和验证码

发布

npm publish

更新

npm version 版本号
npm publish

可以在npm官网上查看自己发布过的包

脚手架开发