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

plop是一款微型的脚手架工具，它的特点是可以根据一个模板文件批量的生成文本或者代码，不再需要手动复制粘贴，省事省力。

全局安装

npm i plop -g

项目本地安装

npm i plop -D

使用

1.

在项目根目录中新建一个plopfile.js文件，用于编写在命令行向用户提出问题，并根据用户输入的内容来进行各种操作，是plop的入口文件，需要导出一个函数，该函数接收一个plop对象做为参数

如：

module.exports = plop=>{
    plop.setGenerator('pages',{ // 这里的wxfile是一个自己设定的名字，在执行命令行的时候会用到
        description:'create the repeat pages', // 这里是对这个plop的功能描述
        prompts:[{
            type:'input', // 问题的类型
            name:'fileName', // 问题对应得到答案的变量名，可以在actions中使用该变量
            message:'your fileName is', // 在命令行中的问题
            default:'page' // 问题的默认答案
        }],
        actions:[{
            type:'add', // 操作类型，这里是添加文件
            path:'{{fileName}}.js', // 添加的文件的路径
            templateFile:'plop-temp/temp.js' // 模板文件的路径
        }]
    })
}

2.

根目录创建一个plop-temp文件夹来存放模板文件，然后在plop-temp文件下创建一个temp.js文件用于测试

在temp.js中随便写入点东西

const str = '测试呀';

在命令行执行plop pages
输入test，在根目录生成了一个test.js文件，打开test.js文件，里面的内容和temp.js的内容是一样的

如果我们要将命令行填入的内容写到文件里，可以通过在文件内写入{{}}，{{}}内写入对应问题的变量就可以了，比如我们在temp.js里写入

let title = "{{fileName}}"

执行plop输入test后，test.js的内容就会变成

let title = "test"

同时进行多个操作

日常开发中我们肯定是需要重复的在某个目录下添加不同文件，那么这个时候这个工具就非常好用了

我的工程结构如下：

image.png

而我希望的是在pages下新建个目录，然后添加多个文件

第一个步 模板创建

添加模板，必须得先把模板创建好才行，通过下面可看出，我这边日常项目开发中，每个页面文件结构下，基本由以下组成

image.png

第二步 plopfile.js 多配置

module.exports = plop=>{
    plop.setGenerator('pages',{ // 这里的wxfile是一个自己设定的名字，在执行命令行的时候会用到
        description:'create the repeat pages', // 这里是对这个plop的功能描述
        prompts:[{
            type:'input', // 问题的类型
            name:'fileName', // 问题对应得到答案的变量名，可以在actions中使用该变量
            message:'your fileName is', // 在命令行中的问题
            default:'page' // 问题的默认答案
        }],
        actions:[
            {
                type:'add', // 操作类型，这里是添加文件
                path:'src/pages/{{fileName}}/index.less', // 添加的文件的路径
                templateFile:'plop-temp/pages/index.less' // 模板文件的路径
            },
            {
                type:'add', 
                path:'src/pages/{{fileName}}/index.tsx', 
                templateFile:'plop-temp/pages/index.tsx' 
            },
            {
                type:'add', 
                path:'src/pages/{{fileName}}/model.js', 
                templateFile:'plop-temp/pages/model.js' 
            },
            {
                type:'add', 
                path:'src/pages/{{fileName}}/server.ts', 
                templateFile:'plop-temp/pages/server.ts'
            },
        ]
    })
}

第三步 使用

输入 plop pages

image.png

创建 userDemo目录

image.png

可以看到在userDemo 下目录下创建了多个文件，是不是非常的nice，哈哈 那就到这里了

总结

使用plop步骤

1. 将plop模块作为项目开发依赖安装
2. 在项目跟目录下创建一个plopfile.js文件
3. 编写用于生成特定类型文件的模板
4. 通过Plop提供的CLI运行脚手架任务