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

原创已于 2023-08-18 17:18:31 修改 · 2.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

于 2022-06-02 15:31:44 首次发布

前端专栏收录该内容

389 篇文章

订阅专栏

本文介绍了如何利用plop自动化工具在Vue3项目中创建定制化的文件模板，通过设置欢迎消息、生成器和模板目录，实现高效开发。通过选择模板、目录和输入文件名，能快速生成如页面组件的文件，提高开发效率。

一、介绍

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
    }
}

2.6、创建文件，选择模板