平时在工作中我们都会用一些脚手架工具来快速构建项目的原型，比如Vue的vue-cli，React的create-react-app等；但是因为这些脚手架是通用型的，少不了还要对其进行二次封装，比如配置CSS、配置网络请求axios、配置UI库等等；既然这样的话那就有必要根据自己的需求来定制属于自己的脚手架。

项目效果

项目核心依赖

commander 命令行工具
download-git-repo git仓库代码下载
chalk 命令行输出样式美化
Inquirer.js 命令行交互
ora 命令行加载中效果
cross-spawn 执行依赖安装命令

相关依赖的用法，请到对应的github仓库查看，我们只会用到最基本的用法，稍微看一下就知道怎么用了。

项目结构

├── bin
│   └── www             //可执行文件
├── dist
    ├── ...             //生成文件
└── src
    ├── index.ts        //主流程入口文件
    ├── init.ts         //脚手架初始化
    └── utils
        ├── constants.ts //定义常量
        ├── install.ts       //安装依赖
        ├── downloadGitRepo.ts   //拉取远程模版
        └── downloadGitRepo.d.ts       // 类型声明
├── .babelrc         //babel配置文件
├── tsconfig.json    //typescript配置文件
└── package.json     //包管理

初始化项目

创建一个空项目(gong-cli)(名字随意，如果准备发布到npm,就不能和别人的重名)，使用 npm init -y进行初始化。

gong-cli 命令

node.js 内置了对命令行操作的支持，package.json 中的 bin 字段可以定义命令名和关联的执行文件。在 package.json 中添加 bin 字段

package.json

{
    "name": "gong-cli",
    "version": "1.0.0",
    "description": "a simple cli",
    "main": "dist/index.js",
    "files": [   // 上传到npm的文件
      "bin",
      "dist/**/*.js"
    ],
    "bin": {
      "gong-cli": "./bin/www"
    },
    "scripts": {
      "compile": "babel src -d dist --extensions '.ts' ",
      "watch": "npm run compile -- --watch"
    },
}

www

#!/usr/bin/env node
require('../dist/index.js'); // 通过babel把ts编译成js再运行

在当前 gong-cli 的根目录下执行 npm link，将 gong-cli 命令链接到全局环境;这样在开发环境中，就可以运行gong-cli相关命令。

入口文件

./src/index.ts

import commander from 'commander'
import { VERSION } from './utils/constants'
const program = new commander.Command()

program
  .command('init <projectName>')
  .description('gong-cli init')
  .action(() => {
    require('./init')(...process.argv.slice(3))
  })

program.version(VERSION, '-v --version')

program.parse(process.argv)

在入口文件中我们通过command定义了一个init <projectName>命令，其中projectName由用户自己输入，不能为空；比如：

gong-cli init demo

当用户输入该命令后，即开始加载初始化函数init，传入的参数为字符串demo。

模版初始化

./src/init.ts

import { download } from './utils/downloadGitRepo'
import { install } from './utils/install'
import { promisify } from 'util'
import ora from 'ora'
import inquirer from 'inquirer'
import fs from 'fs'
import chalk from 'chalk'
import path from 'path'

const exist = promisify(fs.stat)

const init = async (projectName: string) => {
  const projectExist = await exist(projectName).catch(err => {
    // 处理除文件已存在之外的其他错误
    if (err.code !== 'ENOENT') {
      console.log(chalk.redBright.bold(err))
    }
  })
  // 文件已存在
  if (projectExist) {
    console.log(chalk.redBright.bold('The file has exited！'))
    return
  }
  // 接收用户命令
  inquirer
    .prompt([
      {
        name: 'description',
        message: 'Please enter the project description',
      },
      {
        name: 'author',
        message: 'Please enter the project author',
      },
      {
        type: 'list',
        name: 'language',
        message: 'select the develop language',
        choices: ['javaScript', 'typeScript'],
      },
      {
        type: 'list',
        name: 'package',
        message: 'select the package management',
        choices: ['npm', 'yarn'],
      },
    ])
    .then(async answer => {
      // 下载模板 配置相关信息
      let loading = ora('downloading template...')
      loading.start()
      loading.color = 'yellow'
      download(projectName, answer.language).then(
        async () => {
          loading.succeed()
          const fileName = `${projectName}/package.json`
          if (await exist(fileName)) {
            const data = fs.readFileSync(fileName).toString()
            let json = JSON.parse(data)
            json.name = projectName
            json.author = answer.author
            json.description = answer.description
            fs.writeFileSync(
              fileName,
              JSON.stringify(json, null, '\t'),
              'utf-8',
            )
            console.log(chalk.green('Project initialization finished!'))
            console.log()
            console.log(chalk.yellowBright('start install dependencies...'))
            // 安装依赖
            await install({
              cwd: path.join(process.cwd(), projectName),
              package: answer.package,
            }).then(() => {
              console.log()
              console.log('We suggest that you begin by typing:')
              console.log()
              console.log(chalk.cyan('  cd'), projectName)
              console.log(`  ${chalk.cyan(`${answer.package} start`)}`)
            })
          }
        },
        () => {
          loading.fail()
        },
      )
    })
}

module.exports = init

进入init初始化函数后，首先判断是否存在和demo同名的文件夹，如果有抛出错误让用户重新输入；然后通过inquirer获取用户在终端输入的信息，这里我们只先获取用户定义的项目描述、项目作者、项目开发语言、项目包管理四个字段。然后通过download去下载对应的模版，下载完模版之后再通过install函数安装依赖。整个过程到这就结束了，还是比较简单的。

拉取远程模版

./src/utils/downloadGitRepo.ts

import downloadGit from 'download-git-repo'

export const download = async (projectName: string, language: string) => {
  // 这里先用了巨硬家的react模版
  let api = 'microsoft/'
  language === 'javaScript'
    ? (api = api + 'vscode-react-sample')
    : (api = api + 'TypeScript-React-Starter')
  return new Promise((resolve, reject) => {
    downloadGit(api, projectName, (err: any) => {
      if (err) {
        reject(err)
      }
      resolve()
    })
  })
}

安装依赖

./src/utils/install.ts

const spawn = require('cross-spawn')
interface installProps {
  cwd: string  // 项目路径
  package: string //包管理器 yarn 或者 npm
}
export const install = async (options: installProps) => {
  const cwd = options.cwd
  return new Promise((resolve, reject) => {
    const command = options.package
    const args = ['install', '--save', '--save-exact', '--loglevel', 'error']
    const child = spawn(command, args, {
      cwd,
      stdio: ['pipe', process.stdout, process.stderr],
    })

    child.once('close', (code: number) => {
      if (code !== 0) {
        reject({
          command: `${command} ${args.join(' ')}`,
        })
        return
      }
      resolve()
    })
    child.once('error', reject)
  })
}

启动项目

yarn watch

打包发布到npm

运行打包命令yarn compile，生成的文件在dist文件夹下；然后运行npm adduser登录自己的npm账户，最后运行npm publish 将bin和dist两个文件夹的内容发布到npm上。其它用户通过 npm install gong-cli -g 全局安装后, 即可使用 gong-cli 命令安装脚手架。

完整源码地址