@jzinfo/create-project/lib/Creator.js

前端项目脚手架工具

const inquirer = require('inquirer');
const util = require('./util');
const os = require('os');
const ora = require('ora')

// 临时目录
const tempDir = '__jz-create-project__templates__'

module.exports = class Creator {
    constructor() {
        this.answers = null;
        this.files = [];
    }

    async prompt() {
        this.answers = await inquirer.prompt([
            {
                type: 'list',
                name: 'type',
                message: '项目类型:',
                choices: ['mobile', 'pc', 'uniapp'],
                default: 0,
            },
            {
                type: 'list',
                name: 'version',
                message: '版本',
                choices: ['vue2', 'vue3'],
                default: 1,
                when: function(answers) {
                    return ['mobile', 'pc'].includes(answers.type)
                },
            },
            {
                type: 'input',
                name: 'code',
                message: '项目代码:',
                validate: function(value) {
                    if (/^\b[-A-Za-z\d]+\b$/.test(value)) {
                        return true
                    }
                    return '请输入一个合法的项目代码(字母数字和中划线)'
                },
            },
            {
                type: 'input',
                name: 'name',
                message: '项目名称:',
                default: 'Auto generated by template',
            },
            {
                type: 'confirm',
                name: 'autoInstall',
                message: '自动安装依赖?',
                default: true,
            },
        ])

        // add vue3 选择
        if (this.answers.type !== 'mobile') {
            console.log(this.answers)
            throw new Error('所选择的配置暂未实现')
        }
    }

    clone() {
        const spinner = ora(`开始拉取远程模板...\n`).start()

        let templateDir
        // todo: 各个版本仓库路径判断 暂时只有mobile（vue2,vue3）
        if (this.answers.type === "mobile") {
            switch (this.answers.version) {
                case "vue2":
                    templateDir = "front-template"
                    break;
                case "vue3":
                    templateDir = "front-template-v3"
                    break;
            }
        }
        util.execCmdSync(`git clone https://jzgit.jz-ins.com/jzresp/${templateDir}.git ${tempDir}`)
        spinner.succeed('模板拉取完成')

        return this
    }

    filter() {
        this.files = util.travelPaths(tempDir, filepath => {
            // 返回 .js/.json/.yaml/.config/.html 文件
            if (/.+\.(jsx?|tsx?|json|yaml|conf|html|vue|css|sass)$/i.test(filepath)) {
                return true
            }

            // 处理 .env 文件
            if (/\.env/i.test(filepath)) {
                return true
            }

            // 处理无后缀名的文件，比如 Jenkinsfile
            if (/Jenkinsfile/i.test(filepath)) {
                return true
            }

            return false
        })

        return this
    }

    replace() {
        const spinner = ora(`开始替换模板文件...\n`).start()
        const total = this.files.length
        let count = 1
        this.files.forEach(filePath => {
            spinner.text = `进度: ${count}/${total}`
            util.replaceFileContentSync(filePath, /__FE_PROJECT_CODE__/g, this.answers.code)
            util.replaceFileContentSync(filePath, /__FE_PROJECT_NAME__/g, this.answers.name)
            count++
        })
        spinner.succeed('替换完成')

        return this
    }

    installDep() {
        if (this.answers.autoInstall === true) {
            const spinner = ora(`开始安装项目依赖...\n`).start()
            util.execCmdSync(`cd ${tempDir} && pnpm install`)
            spinner.succeed('依赖安装完成')
        }
    }

    //判断操作系统环境
    isWindowsSystem() {
        return os.type() === 'Windows_NT'
    }

    cleanup() {
        this.installDep()

        const spinner = ora(`开始清理...\n`).start()

        const moveCommand = this.isWindowsSystem() ? "move" : "mv"

        util.execCmdSync(`cd ${tempDir} && rm -rf .git && cd .. && ${moveCommand} ${tempDir} front-${this.answers.code}`)
        console.log()
        spinner.succeed('恭喜！项目创建成功')

        return this
    }
}