创建和发布自己的cli

mkdir vue-auto-router-cli
cd vue-auto-router-cli
npm init -y
安装handlebars
npm install handlebars -S

打开项目

创建基础命令

新建bin/kkb
注册解析器用node语言
选择JavaScript react语言

#!/usr/bin/env node
const program = require('commander')//创建命令
program.version(require('../package').version)//定义版本号options
    .command('init <name>','init project')//第一个参数是命令 第二个参数是说明
    .command('refresh','refresh routes...')
program.parse(process.argv)

package.json加上

"bin":{
    "kkb":"./bin/kkb"
  },

运行npm link
敲命令kkb 就会执行kkb的脚本

init命令

创建bin/kkb-init
写kkb init name的实现
这里的操作主要是克隆github的一个工程

#!/usr/bin/env node
const program = require('commander')
const {clone} = require('../lib/download')
program.action(async name => {
    console.log('创建项目：'+name)
    await clone('github:su37josephxia/vue-template',name)
})
program.parse(process.argv)

添加权限
chmod +x bin/*
运行命令
kkb init test
这时候工程里面会多出一个test的工程
进入工程
cd test
安装依赖
npm i
运行
npm run serve

refresh命令

创建bin/kkb/refresh
读取test/src/views里面的所有页面遍历出一个对象的格式

{
hello:hello.vue
}
利用模板把对象编译成router和App.vue里面的配置

#!/usr/bin/env node
const program = require('commander') 
const symbols = require('log-symbols') //图片库
const chalk = require('chalk')//粉笔 变log颜色
// console.log(process.argv)
program.action(() => {
    console.log('refresh .... ')
})
program.parse(process.argv)
const fs = require('fs')//文件读取
const handlebars = require('handlebars')//模板渲染
//路径从test文件夹开始算
//读views 排除home
const list = fs.readdirSync('./src/views')
    .filter(v => v !== 'Home.vue')
    .map(v => ({
    //去掉后缀 转小写 onePage
    name: v.replace('.vue', '').toLowerCase(),
    //onePage.vue
    file: v
}))
//调用
compile({
    list
}, './src/router.js', './template/router.js.hbs')
//调用
compile({
    list
}, './src/App.vue', './template/App.vue.hbs')
function compile(meta, filePath, templatePath) {
    if (fs.existsSync(templatePath)) {
        //读取模板
        const content = fs.readFileSync(templatePath).toString(); 
        //渲染
        const result = handlebars.compile(content)(meta); 
        //根据数据渲染模板
        fs.writeFileSync(filePath, result);
    }
    //打印日志
    console.log(symbols.success, chalk.green(`${filePath} 创建成功`))
}

发布

创建bin/publish.sh

#!/usr/bin/env bash
npm config get registry # 检查仓库镜像库
npm config set registry=http://registry.npmjs.org
echo '请进行登录相关操作:'
npm login # 登陆
echo "-------publishing-------"
npm publish # 发布
npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像 echo "发布完成"
exit

控制台添加权限
chmod +x publish.sh
运行命令
./publish.sh
登录

最后编辑于：2019.11.18 09:43:48