如何创建一个cli工具呢?
1.创建文件夹以及初始化
mkdir vitim-cli && cd vitim-cli && npm init -y
2.创建bin文件夹,并设置bin命令
通过设置bin命令,为后面发布到npm,可以通过vitim命令(可以看第7点)访问
3.commander插件
安装
yarn add commander or npm install commander
在bin目录下新建commander.js 文件
const { program } = require('commander');
program.version('0.0.1');
//有两种最常用的选项，一类是 boolean 型选项，选项无需配置参数，
//另一类选项则可以设置参数（使用尖括号声明在该选项后，如--expect <value>）。如果在命令行中不指定具体的选项及参数，则会被定义为undefined。
program
.option('-d, --debug', 'output extra debugging')
.option('-s, --small', 'small pizza size')
.option('-p, --pizza-type <type>', 'flavour of pizza');
// 参数解析
program.parse(process.argv);
运行
可以得知commander可以为我们进行参数解析
这里注意一个点
// 参数解析
program.parse(process.argv);
这段代码必须放在最后,不然写在它后面的会解析失败
4.inquirer插件
inquirer是什么呢?
inquirer是实现人机交互的插件
安装
yarn add inquirer or npm install inquirer
在bin目录下新建inquirer.js 文件
const { program } = require('commander');
const inquirer = require('inquirer');
program.version('0.0.1');
program
.command('create <app-name>') // 命令
.description('create app') // 命令描述
.action(async () => { // 命令行为
let answer = await inquirer.prompt([
{
name: 'features',
type: 'checkbox',
message: 'Check the features needed for your project',
choices: ['Babel', 'TypeScript', 'Router', 'Vuex', 'CSS Pre-processors']
},
{
name: 'use_class_style',
type: 'confirm',
message: 'Use class-style component syntax?'
},
])
// 通过answer可以获取到刚才的选择
})
// 参数解析
program.parse(process.argv);
运行
5.download-git-repo插件
download-git-repo这个插件可以帮助我们从git仓库中拉取代码
安装
yarn add download-git-repo or npm install download-git-repo
在bin目录下新建download.js 文件
let download = require("download-git-repo")
// 第二个参数为拉取代码后的文件夹名字
download('direct:https://gitee.com/igxv/v-cli', 'appName', { clone: true })
运行
可以看到我们拉取成功了,多了一个名字叫appName的文件夹
6.综合运用
☆目标:
1.创建一个vimit-cli工具
2.输入vimit create appName 开始进行创建
3.出现选择
(1).请选择你的语言版本? ['JavaScript', 'TypeScript']
(2).请选择css预处理器? ['sass', 'less']
4.创建成功之后的提示
you can
cd appName
yarn or npm install
yarn dev or npm run start
全部代码
const { program } = require('commander');
const inquirer = require('inquirer');
const { promisify } = require('util') // 异步
const download = promisify(require("download-git-repo"))
const chalk = require('chalk')
// 克隆
const clone = (appName) => download('direct:https://gitee.com/igxv/v-cli', appName, { clone: true })
//日志打印
const log = (content, color) => console.log(chalk[color](content));
program.version('1.0.0');
program
.command('create <app-name>') // 命令
.description('create app') // 命令描述
.action(async (appName) => { // 命令行为
let answer = await inquirer.prompt([
{
name: 'language',
type: 'checkbox',
message: '请选择你的语言版本?',
choices: ['JavaScript', 'TypeScript']
},
{
name: 'pre_css',
type: 'checkbox',
message: '请选择css预处理器?',
choices: ['sass', 'less']
},
])
// 开始克隆
clone(appName);
log(`
创建成功
`, 'green')
log(`
you can
cd appName
yarn or npm install
yarn dev or npm run start
`,'blue')
})
// 参数解析
program.parse(process.argv);
运行
发布到npm中
npm publish
这样就可以发布成功了
7.使用
安装已经发布的vitim-cli
npm i vitim-cli -g
使用vitim进行创建
vitim create app
8.插件推荐
交互输入： inquirer、 enquirer 、prompts
加载动画：ora
