功能:用于自动化创建及项目中特定同类型的文件
具体使用:
- 将plop模块作为项目开发依赖安装
yarn add plop --dev
- 在项目根目录下创建一个plopfile.js
- 在plop file.js文件中定义脚手架任务
举例:
//Plop入口文件 需要导出一个函数
//此函数接收一个plop对象,用于创建生成器任务
module.exports = plop => {
// 第一个参数生成器的名字,第二个参数生成器的描述
plop.setGenerator('component',{
description: 'create a component',
prompts: [
{
type: 'input',
name: 'name',
message: 'component name',
default: 'MyCompnent'
}
],
//完成命令行后需要执行的动作 可以是一个数组
actions: [
{
type: 'add', //代表添加文件
path: 'src/components/{{name}}/{{name}}.js',
templateFile: 'plop-templates/component.hbs'
},
{
type: 'add', //代表添加文件
path: 'src/components/{{name}}/{{name}}.css',
templateFile: 'plop-templates/component.css.hbs'
},
{
type: 'add', //代表添加文件
path: 'src/components/{{name}}/{{name}}.test.js',
templateFile: 'plop-templates/component.test.hbs'
},
]
})
}
- 编写用于生成特定类型文件的模板
在项目根目录下创建文件夹-plop-templates,创建一份模板文件
文件内容举例:
component.css.hbs
.{{name}}{
}
component.hbs:
import React form 'react'
export default () => (
<div className="{{name}}">
<h1>{{name}} Component</h1>
</div>
)
component.test.hbs
import React from 'react';
import ReactDOM from 'react-dom';
import {{name}} from './{{name}}';
it('renders without crashing',()=>{
const div = document.createElement('div');
ReactDOM.render(<{{name}}/>,div);
ReactDOM.unmountComponentAtNode(div);
})
- 通过Plop提供的CLI运行脚手架任务
举例:
yarn plop component