前端项目工程化 -- 脚手架 Plop 的使用

Plop是一个小而美的脚手架工具

Plop一般不单独使用,而是集成到项目中,帮助我们根据模板批量生成文件

Plop怎么使用?

  • 安装

yarn add plop --dev

  • 在项目根目录下添加plop的入口文件plopfile.js
// plopfile.js样例代码
module.exoirts=plop=>{
  // 设置名为component的生成器
  plop.setGenerator('component',{
    description:'create a component',
    // 用户交互
    prompt:[
      {
        type:'input',//让用户输入回答问题
        name:'name',
        message:'component name?',
        default:'MyComponent'
      }
    ],
    // 用户交互完成后执行的动作
    actions:[
      {
        type:'add',
        path:'src/componants/{{name}}/{{name}}.js',
        templateFile:'plop-templates/component.hbs'//此处模板需要在项目根目录中添加
      },
      {
        type:'add',
        path:'src/componants/{{name}}/{{name}}.css',
        templateFile:'plop-templates/component.css.hbs'//此处模板需要在项目根目录中添加
      },
      {
        type:'add',
        path:'src/componants/{{name}}/{{name}}.test.js',
        templateFile:'plop-templates/component.test.hbs'//此处模板需要在项目根目录中添加
      }
    ]
  }
}

添加模板文件

在项目根目录中添加plop-templates文件夹,并添加文件:

  • components.hbs
  • components.css.hbs
  • components.test.hbs

文件中可以使用handlebars模板引擎语法

测试使用

在项目目录打开终端,输入yarn plop component,根据提示输入component的名称,比如"componenttest",就会在项目的component目录中添加文件夹componenttest,并生成模板文件对应类型的文件以及文件内容基础内容

posted @ 2021-06-19 18:05  MissSage  阅读(133)  评论(0编辑  收藏  举报