前端项目工程化 -- 脚手架 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,并生成模板文件对应类型的文件以及文件内容基础内容