前端工程化：plop自动生成文件（快速开发，创建模板文件）-阿里云开发者社区

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

2023-07-10 218

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端工程化：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.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
    }
}