目前在市面上存在很多脚手架，如：create-react-app、vue-cli。我们可以通过一行简单的命令，就能创建一个基本的项目工程，大大的提高了开发效率。但是我们会面临一个问题，除了脚手架帮我们创建好的项目框架，我们的项目总有需要定制化的配置，比如我们需要引入我们想要的elementUI框架，引入axios相关的工具类完成http请求等。我们不可能每次开启新项目都再配置一遍吧，这太劳神费力了。通常我们会搞一个个性化脚手架cli，平时创建项目时通过该脚手架一键生成，并同时完成所有需要的配置，以快速开发。接下来，我们看看怎么搞？

1.CLI 的运行原理

创建动态链接库，暴露全局 cli 命令

如果要暴露一个全局的命令，首先需要在 package.json 文件中编写一个 bin 命令，当前示例指向bin目录下的django-vue-admin.js文件。

"bin": "bin/django-vue-admin.js"

读取并解析命令行参数
读取命令行参数其实非常简单，使用 program.argv 获取
提供用户可选的配置项
根据用户的选择，创建不同类型的项目模板，比如是否要typescript支持
拷贝自定义模板到本地

一般我们会事先准备好一个项目模板，供cli下载

1.1 预先基础配置

基于bin 命令的配置，将我们的包映射到全局，这样就可以通过运行模块名来运行我们的模块，这跟linux上建立一个软链接差不多，以方便我们在本地测试。

#!/usr/bin/env node
console.log('hello');
const program = require('commander')
program
 .version(require('../package').version)
 .usage('<command> [options]')
 .command('create', 'add a new template')
 .command('list', 'list all the templates')


 program.parse(process.argv)

我们需要预先在外层的package.json 安装如下需要的模块，以及映射bin目录下的命令

{
  "name": "django-vue-admin-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "django-vue-admin": "bin/django-vue-admin",
    "django-vue-admin-create": "bin/django-vue-admin-create",
    "django-vue-admin-list": "bin/django-vue-admin-list",
    "django-vue-admin-add": "bin/django-vue-admin-add",
    "django-vue-admin-delete": "bin/django-vue-admin-delete"
  },
  "author": "xhw",
  "license": "ISC",
  "dependencies": {
    "chalk": "^2.4.2",
    "commander": "^2.19.0",
    "download-git-repo": "^1.1.0",
    "figlet": "^1.5.2",
    "fs": "^0.0.1-security",
    "handlebars": "^4.7.7",
    "inquirer": "^6.2.2",
    "lolcatjs": "^2.4.1",
    "minimist": "^1.2.6",
    "ora": "^3.2.0"
  }
}

并对bin目录下的命令绑定

cd django-vue-admin
npm link

查看各个命令效果

django-vue-admin -h

create

预先配置

2.创建cli所需要的部分依赖模块

commander实现控制台命令行问题交互；
inquirer 命令行中的 select 选择器
chalk为控制台输出的文字着色；
download-git-repo拉去github项目代码；
ora实现控制台进度条样式；
figlet 生成好看的图标文字
lolcatjs 生成随机颜色

3.实现脚手架代码逻辑片段

#!/usr/bin/env node是必须的，这让node可以识别到

3.1 引入所需依赖

#!/usr/bin/env node
const path = require("path");
const program = require('commander');//cmd控制台交互
const ora = require('ora');//进度条
const chalk = require('chalk');//给提示文案着色
const download = require('download-git-repo');//拉取github项目
const fs = require('fs');
const minimist = require('minimist')//轻量级命令行参数解析引擎
const figlet = require("figlet");//酷炫的文字工具
const printer = require("lolcatjs");//生成颜色
let spinner = ora('downloading template ...')
spinner.start()

3.2 创建cli版本和用法命令

// 获取cli版本号
//展示django-vue-admin logo
const logotext = figlet.textSync("django-vue-admin-cli");
const logotextColor = printer.fromString(logotext);
//提取version
const version=`${logotextColor} ${require('../package').version}`;
program
    .version(version)
    .usage('<command> [options]')

3.3 从项目模板地址，下载到本地

我们这里使用了工具类download-git-repo的download方法，大家可以查下相关API

// 成功和失败文案着色
const success = chalk.blueBright;
const error = chalk.bold.red;
//地址有多种写法，这个大家可以查看download-git-repo相关API
const templateUrl = 'github:xhweng-yy/django-vue3-admin#master'
//下载到指定目录，名称基于用户输入的appName
const appName = 'django-vue3-admin'
const dir = path.join(process.cwd(),appName);
download(templateUrl, dir, function (err) {
    // 拉取项目代码
    if (!err) {
        //成功的逻辑
         spinner.succeed(success('拉取成功'));
          //更改 package.json 中的 name 和版本号，实现参照后文
          changePackage(appName);
          spinner.succeed(success('项目初始化成功'));
          spinner.succeed(success(`cd ${appName}`));
          spinner.succeed(success('cd web/'));
          spinner.succeed(success('npm install && npm run dev'));
    } else {
        //失败的逻辑 
        console.log(err);
        spinner.fail(error('拉取失败'));
    }
});

3.4. 项目下载完成后，依据用户输入，变更项目名和版本号

// 替换模板package.json文件的name字段
const changePackage = (appName) => {
  fs.readFile(`${process.cwd()}/${appName}/web/package.json`, (err, data) => {
      if (err) throw err;
      let _data = JSON.parse(data.toString());
      _data.name = appName;
      _data.version = '1.0.0';
      let str = JSON.stringify(_data, null, 4);
      fs.writeFile(`${process.cwd()}/${appName}/web/package.json`, str, function (err) {
          if (err) throw err;
      })
  });
};

附录代码结构

本代码github访问地址

django-vue-admin-cli

如何发布到npmjs

登录npm官网（www.npmjs.com）

a) 没有账号新注册一个
b) 切换到npm官方源
i. 查看npm当前源（ npm config get registry 或者 npm config list ）
ii. 设置回原本的源，用来发布npm包（ npm config set registry registry.npmjs.org/ ） iii. 设置为淘宝镜像（npm config set registry registry.npm.taobao.org）

首次需要设置用户名密码绑定npm

npm login
npm publish

下图即为发布到npmjs 成功的图片，即可进行npm install django-vue-admin-cli下载

如何构建自己的vue-cli脚手架