美文网首页
搭建自己的cli脚手架

搭建自己的cli脚手架

作者: 小灰灰_a | 来源:发表于2023-08-03 17:50 被阅读0次
    背景

    在我们日常工作中,绝非仅仅开发/维护单一项目,在新开业务线或者新增模块时候,通常会搭建新的项目,虽然现在的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 下载就能用了

    相关文章

      网友评论

          本文标题:搭建自己的cli脚手架

          本文链接:https://www.haomeiwen.com/subject/ambmpdtx.html