前端工程化：plop自动生成文件（快速开发，创建模板文件）

一、介绍

plop可以生成定制文件名、定制路径下的模板文件。

这样有利于快速开发，特别是对于大型的后台管理系统，页面很多相似的内容，重复率很高的项目。

二、实践

2.1、安装

yarn add plop -g

2.2、package--script配置

"plop": "plop",

2.3、根目录增加plopfile.js

module.exports = function (plop) {
    plop.setWelcomeMessage('请选择需要创建的模式：')
    plop.setGenerator('page', require('./plop-tpls/page/prompt'))
    plop.setGenerator('page2', require('./plop-tpls/page2/prompt'))
}

2.4、根目录创建plop模板目录

2.5、page目录为例：

2.5.1、index.hbs

<template>
    <div>
        <!-- Your content -->
    </div>
</template>

<script setup name="{{ properCase componentName }}">
// const { proxy } = getCurrentInstance()
// const router = useRouter()
// const route = useRoute()
</script>

<style lang="less" scoped>

</style>

2.5.2、prompt.js

const path = require('path')
const fs = require('fs')

function getFolder(path) {
    let components = []
    const files = fs.readdirSync(path)
    files.forEach(function (item) {
        let stat = fs.lstatSync(path + '/' + item)
        if (stat.isDirectory() === true && item != 'components') {
            components.push(path + '/' + item)
            components.push.apply(components, getFolder(path + '/' + item))
        }
    })
    return components
}

module.exports = {
    description: '创建页面',
    prompts: [
        {
            type: 'list',
            name: 'path',
            message: '请选择页面创建目录',
            choices: getFolder('src/pages')
        },
        {
            type: 'input',
            name: 'name',
            message: '请输入文件名',
            validate: v => {
                if (!v || v.trim === '') {
                    return '文件名不能为空'
                } else {
                    return true
                }
            }
        }
    ],
    actions: data => {
        let relativePath = path.relative('src/pages', data.path)
        const actions = [
            {
                type: 'add',
                path: `${data.path}/{{dotCase name}}.vue`,
                templateFile: 'plop-tpls/page/index.hbs',
                data: {
                    componentName: `${relativePath} ${data.name}`
                }
            }
        ]
        return actions
    }
}

2.6、创建文件，选择模板

 2.7、选择目录 

2.7、输入文件名

 2.8、完成

 2.9、模板文件创建成功

三、关注我，一起学习，欢迎交流指正。 

四、参考链接：
前端自动化工具plopjs - 走看看

GitHub - tobe-fe-dalao/fast-vue3: Vue3+Vite+Ts+Pinia+...一个快速开发vue3的模板框架

前端自动化工具--plop的简单使用 - 简书