我们在做新的页面或组件时，会做很多重复的初始化的工作。如创建类似的文件: 组件文件，样式文件等。文件中写类似的初始化代码: 引入样式，定义组件，导出组件等。
Plop 能帮你搞定这些重复工作。
Plop 介绍
Plop 是一个易学，易用，且功能强大的脚手架工具。它能通过终端命令，接收参数，创建你所需要的模板文件。
下面，我们以生成 React 的组件为例，介绍 Plop 的用法。
第 1 步 在项目中安装 Plop
npm install --save-dev plop
第 2 步 配置 Plop
我们来实现，输入组件名称，生成组件代码的功能。组件名称做为参数，通过命令行中获取。Plop 从命令行中获取参数，用的是 inquirer。
plopfile.js 是 Plop 的配置文件。在项目根目录下新建 plopfile.js，内容如下:
function main (plop) {
plop.setGenerator('component', {
description: '创建组件',
// 命令行交互
prompts: [
{
type: 'input',
name: 'name',
message: '组件名称'
}
],
actions: data => {
const componentName = toComponentName(data.name)
const actions = [
{
// 添加组件文件
type: 'add',
// 生成的文件的地址
path: `src/components/{{name}}/index.tsx`,
// 模板文件地址
templateFile: `plop-templates/component.hbs`,
data: {// 传入模板的参数
componentName
},
skipIfExists: true
},
{
// 添加样式文件
type: 'add',
path: `src/components/{{name}}/style.scss`,
templateFile: 'plop-templates/style.hbs',
skipIfExists: true
}
]
return actions
}
});
}
function toComponentName(name) {
let nameArray = name.split('-')
return nameArray.map(item => `${item.charAt(0).toUpperCase()}${item.substr(1)}`).join('')
}
module.exports = main
第 3 步 创建模板文件
根据上一步配置中的模板文件路径，创建目录 plop-templates，并在该目录下创建文件: component.hbs 和 style.hbs。
component.hbs 是组件模板，内容如下:
import s from './style.scss'
interface I{{componentName}}Props {
className?: string;
}
function {{componentName}}({ className }: I{{componentName}}Props) {
return (
<div></div>
)
}
export default {{componentName}}
{{componentName}} 是从上一步中传入的参数。Plop 解析模板用的是 handlebars。
style.hbs 是样式模板。内容为空，也可以些样式的初始化代码。
第 4 步 增加生成命令
在 package.json 中新增:
"script":{
...,
"new":"plop"
}
第 5 步 运行
npm run new
至此，一个简单的固定模板就自动生成就写好了。
当然，Plop 的功能不止一次。Plop 支持根据参数来决定生成哪些文件。告别复制粘贴，用 Plop 来生成模板代码吧~
觉得本文对你有帮助。点个赞，分享给小伙伴们吧~
网友评论