为什么使用？

在遇到项目中一些固定的文件夹结构场景中，可通过接入plop依赖，实现已命令的形式快速创建命名文件

如何使用？

  • 项目目录安装plop依赖

    1. npm i plop --save

  • 项目目录下创建plopfile.js文件，该文件返回一个函数，用于执行plop交互命令

    1. module.exports = plop => {
    2. plop.setGenerator('component', { // 参数一定义执行plop时的命令名称
    3.   description: '创建组建', // 命令的描述
    4.   prompts: [
    5.     { // 交互一：创建组建的名称
    6.       type: 'input', // 交互操作类型
    7.       name:'name', // 交互变量名
    8.       message: '创建组件名称',
    9.       default: 'MyComponent',
    10.     }
    11.   ],
    12.   actions: [ // 执行对应操作（拷贝制定模版文件，到对应文件目录下，多文件依次拷贝）
    13.     {
    14.       type: 'add',
    15.       path: 'src/compnent/{{name}}/{{name}}.js', // 拷贝后目标文件目录
    16.       templateFile: 'plop-templates/components/index.hbs', // 拷贝前模版目录
    17.     },
    18.     {
    19.       type: 'add',
    20.       path: 'src/compnent/{{name}}/{{name}}.css',
    21.       templateFile: 'plop-templates/components/index.css.hbs',
    22.     }
    23.   ]
    24. })
    25. }

  • 定义模版文件目录（模版文件以hbs结尾，内部接收的命令中的参数使用例如：{{title}}双括号形式包裹接收）

image.pngimage.png

  • 执行plop命令创建文件(默认执行node_modules下.bin文件目录下plop命令)
    1. yarn plop component
    image.png