搭建自己的cli脚手架
2023-08-03 本文已影响0人
小灰灰_a
背景
在我们日常工作中,绝非仅仅开发/维护单一项目,在新开业务线或者新增模块时候,通常会搭建新的项目,虽然现在的vue
react
等框架可以快速构建一个基础项目,但是里面的依赖版本、公共方法,统一规范等内容,还是要从老项目里进行copy,有些小伙伴可能会按照自己的喜好重新封装,这样各项目间的规范,请求方法等并不统一,无形中增加了后期开发/维护的成本,让大家不能很好的工(滑)作(水)。
我们应该将最基础的规范、模板等集成到自己的脚手架cli
中,这样只需要一行命令,即可初始化完成一个符合自己团队的、具有统一规范的模板,这样大家即使维护不同的项目,也可以愉快的滑水了。
实现
1、使用commander
解析命令行;
2、使用inquirer
交互式命令行 ;
3、使用child_process
执行命令行;
4、使用shelljs
监听git
命令行状态;
dome
//xhh-cli.js
const program = require('commander');
const inquirer = require('inquirer');
const { exec } = require("child_process");
const shell = require('shelljs');
const expandReact = [{ name: 'react-router-dom', value: 'react-router-dom' }]
const defaultQuestions = [
// 列表选择
{
type: 'list',
name: 'template',
message: '请选择模板',
choices: [{ name: 'react' }, { name: 'vue2' }, { name: 'vue3' }],
},
// 拓展
{
type: 'checkbox',
name: 'expand',
message: '请选择拓展',
choices: expandReact
},
// 输入
{
type: 'input',
name: 'appName',
message: '请输入应用名称',
default() {
return 'project-app';
},
},
];
const questions = [...defaultQuestions];
// 定义程序名称,版本
program
.name('xhh-cli')
.version('0.0.1')
.action((options, command) => {
inquirer.prompt(questions).then(async (res) => {
exec(`mkdir -p ${res.appName}`, (err) => {
if (!err) {
shell.exec(`git clone xxxx ./${res.appName}`, (code) => {
if (code === 0) {
console.log('====================================');
console.log('初始化成功~');
console.log(`cd ${res.appName}`);
console.log('npm install');
console.log('====================================');
}
})
}
})
});
});
// 解析命令行
program.parse(process.argv);
发布
/// package.json
"bin": {
"xhh-cli": "bin/xhh-cli.js"
},
通过 npm publish
发布我们的脚手架包, npm i xhh-cli -g
下载就能用了