目录
- Plop介绍
Plop的具体使用
- 具体步骤
- 总结
Plop介绍
主要用于创建项目中特定文件类型的小工具,类似于Yeoman
中的sub generator
,一般不会独立使用。一般会把Plop
集成到项目中,用来自动化的创建同类型的项目文件。
Plop的具体使用
具体步骤
- 新建目录,初始化
npm init -y
,安装Plop
npm install -g plop
- 在目录下创建
plop-templates
文件夹,里面创建三个模板文件
- component.css.hbs
.{{name}} {
}
- component.hbs
import React from '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 widthout crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<{{name}} />, div);
ReactDOM.unmountComponentAtNode(div);
});
- 在根目录下创建一个
plopfile.js
的文件,这个文件是Plop
的入口文件,需要导出一个函数,这个函数接收一个plop
对象,用于创建生成器任务。
plop.setGenerator
:设置一个生成器,第一个参数是项目名称,第二个函数是对象,对应设置选项配置项内容:
description
:描述
prompts
:值是数组,命令行交互问题,一个问题对应一个对象actions
:值是数组,完成命令行交互过后完成的一些动作,一个对象一个动作
module.exports = plop => {
// 设置一个生成器,第一个参数是项目名称,第二个函数是对象,对应设置选项
plop.setGenerator('compontent', {
// 描述
description: 'create a component',
// 命令行交互问题
prompts: [
// 一个问题对应一个对象,配置参考自定义Generator
{
type: 'input',
name: 'name',
message: 'component name',
default: 'MyComponent'
}
],
// 完成命令行交互过后完成的一些动作
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'
}
]
})
}
- 在
package.json
中添加
"scripts": {
"plop": "plop"
}
- 运行
npm run plop
# 输入模块名称
? component name Header
#√ ++ \src\components\Header\Header.js
#√ ++ \src\components\Header\Header.css
#√ ++ \src\components\Header\Header.test.js
此时在根目录的src\components
下面,有了三个文件
- Header.js
import React from 'react';
export default () => (
<div className="Header">
<h1>Header Component</h1>
</div>
)
- Header.css
.Header {
}
- Header.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
it('renders widthout crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Header />, div);
ReactDOM.unmountComponentAtNode(div);
});
这样,就可以根据模板一键生成一个组件目录。
总结
- 将
plop
模块作为项目开发依赖安装 - 编写用于生成特定类型文件的模板
- 在项目根目录下创建一个
plopfile.js
文件 - 在
plopfile.js
文件中定义脚手架任务 - 通过
Plop
提供的CLI
运行脚手架任务
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。