CLI 工具

一、创建工程

// 创建工程目录
mkdir  king-test-cli
cd king-test-cli
 // 初始化工程
npm init -y 
// 安装cli工具 依赖，后续后注释每一个依赖的作用
npm i commander download-git-repo ora handlebars figlet clear chalk open -s

创建目录 ：

-- bin
    -- king.js  //入口文件
-- lib
    -- init.js  //初始化文件
    -- download.js  //下载程序
-- package.json   //依赖

• /bin/king.js

#!/usr/bin/env node
/**⬆ 指明当前脚本文件的解释程序 */
console.log('cli.....'); // whb-lg

• package.json

...
"bin" : {
    "king": "./bin/king.js"
}
...
// 将npm 模块链接到对应的运行项目中去  控制台运行：
~  npm link 
// 可以执行 king 
~  king
// 控制台输出 cli....  执行成功。 继续

二、定制命令行界面

• /bin/king.js

#!/usr/bin/env node
/**⬆ 指明当前脚本文件的解释程序 */

// console.log('cli.....'); // whb-lg
//定制命令行界面
const program = require('commander'); //定制命令界面
program.version(require("../package").version);

program
        .command('init ')
        .description('init project')
        .action(name=>{
            console.log('init ' + name)
        })

program.parse(process.argv)

//控制台：
~ king --version
1.0.0  //package.json 内的version 版本号
~ king init projectName
init projectName  //输出项目名

三、打印欢迎界面

• /lib/init.js

const {promisify} = require('util');  // promise
const figlet = promisify(require('figlet')); //文字放大库
const clear = require('clear');  // 清屏
const chalk = require('chalk');  // 粉笔方法
const log = content => console.log(chalk.green(content));  //log函数 增加了 chalk装饰
module.exports = async name=>{
    //打印欢迎画面
    //清屏
    clear()
    const data = await figlet('King Welcome') //放大欢迎界面文字
    log(data)  //输出 欢迎界面
}

• /bin/king.js

#!/usr/bin/env node
/**⬆ 指明当前脚本文件的解释程序 */

//定制命令行界面
// console.log('cli.....'); // whb-lg
const program = require('commander'); //定制命令界面
program.version(require("../package").version);

program
        .command('init ')
        .description('init project')
        // .action(name=>{
        //  console.log('init' + name)
        // })
        .action(require("../lib/init"));  //执行初始化
program.parse(process.argv)

四、克隆脚手架

• /lib/download.js

const {promisify} = require('util')
module.exports.clone = async (repo,desc)=>{
    const download = promisify(require('download-git-repo')) //异步下载git协议
    const ora = require('ora') // 下载进度提示
    const process = ora(`下载......${repo}`)
    process.start() //进程启动
    await download(repo,desc) //异步下载
    process.succeed()  //进程完成 ✅
}

• /lib/init.js

const {promisify} = require('util');  // promise
const figlet = promisify(require('figlet')); //文字放大库
const clear = require('clear');  // 清屏
const chalk = require('chalk');  // 粉笔方法
const log = content => console.log(chalk.green(content));  //log函数 增加了 chalk装饰
// 引入 download
const {clone} = require('./download')

module.exports = async name=>{
    //打印欢迎画面
    //清屏
    clear()
    const data = await figlet('King Welcome') //放大欢迎界面文字
    log(data)  //输出 欢迎界面
    
    log(`创建项目：${name}`)
    // 从github克隆项目到指定文件夹 对应git项目 https://github.com/woai3c/vue-admin-template
    await clone('github:woai3c/vue-admin-template',name)
}

五、安装依赖 并 启动项目

const {promisify} = require('util');  // promise
const figlet = promisify(require('figlet')); //文字放大库
const clear = require('clear');  // 清屏
const chalk = require('chalk');  // 粉笔方法
const log = content => console.log(chalk.green(content));  //log函数 增加了 chalk装饰
// 引入 download
const {clone} = require('./download')
//promisify化spawn
//对接输出流
const spawn = async (...args) => {
    const {spawn} = require('child_process');
    return new Promise(resolve => {
        const proc = spawn(...args)
        proc.stdout.pipe(process.stdout)
        proc.stderr.pipe(process.stderr)
        proc.on('close',()=>{
            resolve()
        })
    })
}

module.exports = async name=>{
    //打印欢迎画面
    //清屏
    clear()
    const data = await figlet('King Welcome') //放大欢迎界面文字
    log(data)  //输出 欢迎界面
    
    log(`创建项目：${name}`)
    // 从github克隆项目到指定文件夹 对应git项目 https://github.com/woai3c/vue-admin-template
    await clone('github:woai3c/vue-admin-template',name)
    
    log('安装依赖');
    
    await spawn('npm',['install','i'], {cwd: `./${name}`})
    log(chalk.green(`
安装完成:
To get Start:
===========================
cd ${name}
    npm run serve
===========================
    `))

        //启动项目
    await spawn('npm',['run','serve'],{cwd: `./${name}`})
}

~ king init myProject  //开始创建项目， 直到提示安装完成 就成功了。

六、 发布到npm

https://www.npmjs.com/ 官网注册账号

~ npm config get registry  // 检查仓库镜像库
~ npm config set registry=http://registry.npmjs.org //切换到npmjs
~ npm login  // 登陆 npm 之前登陆过可忽略 
~ npm publish  // 发布 
#### 注意：
## 1、项目名称为 package.json 到name 请确认 npmjs没有此项目
## 2、每次publish 需要修改version , version不可重复
// 发布完成。 本地全局安装   
~ npm install XXXXX -g
// 查看是否全局安装
~ open /Users/*******/.nvm/versions/node/v13.9.0/bin/
// 既可以使用自己到 命令 king 
// 查看 是否安装 king
~  open /Users/******/.nvm/versions/node/v13.9.0/lib/node_modules