项目网址:https://gitee.com/big-right-right/plop-mysample
一. Plop简介
Plop是一个小工具,它提供了一种简单的方法用一致的方式生成代码或任何其他类型的文件。
比如在项目中,每个组件的初始化文件内容基本一致,则可用plop来生成组件,避免每次手动生成的繁琐。
二. 用Plop生成项目中的组件
1. 安装 plop 模块为开发依赖:
yarn add plop --dev
2. 项目根目录下创建组件的模板文件 plop-templates/component.hbs:
export default () => {
<div class="{{name}}">
<h1>{{name}} Component</h1>
</div>
}
3. 再创建一个模板文件 plop-templates/component.css.hbs:
.{{name}}{
color: red;
}
4. 项目根目录下创建 plopfile.js 文件来定义脚手架任务:
// plop 入口文件,需导出一个函数
// 此函数接收一个plop对象,用于创建生成器任务
module.exports = plop => {
// 定义一个叫 component 的任务来自动生成组件的基本文件
plop.setGenerator('component', {
description: 'create a component',
prompts: [
{
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'
}
]
})
}
5. 通过plop提供的 plop 命令来运行脚手架工具以生成组件
创建一个新组件,执行:
yarn plop component
执行完成后,则可以在项目 src/components 目录下看到生成的组件文件。
本文 完。

被折叠的 条评论
为什么被折叠?



