第 012 期 易学易用的模板代码生成神器 - Plop

我们在做新的页面或组件时，会做很多重复的初始化的工作。如创建类似的文件: 组件文件，样式文件等。文件中写类似的初始化代码: 引入样式，定义组件，导出组件等。

Plop 能帮你搞定这些重复工作。

Plop 介绍

Plop 是一个易学，易用，且功能强大的脚手架工具。它能通过终端命令，接收参数，创建你所需要的模板文件。

下面，我们以生成 React 的组件为例，介绍 Plop 的用法。

第 1 步 在项目中安装 Plop

第 2 步 配置 Plop 我们来实现，输入组件名称，生成组件代码的功能。组件名称做为参数，通过命令行中获取。Plop 从命令行中获取参数，用的是 inquirer。

plopfile.js 是 Plop 的配置文件。在项目根目录下新建 plopfile.js，内容如下:

第 3 步 创建模板文件 根据上一步配置中的模板文件路径，创建目录 plop-templates，并在该目录下创建文件: component.hbs 和 style.hbs。

component.hbs 是组件模板，内容如下:

{{componentName}} 是从上一步中传入的参数。Plop 解析模板用的是 handlebars。

style.hbs 是样式模板。内容为空，也可以些样式的初始化代码。

第 4 步 增加生成命令 在 package.json 中新增:

第 5 步 运行

至此，一个简单的固定模板就自动生成就写好了。

当然，Plop 的功能不止一次。Plop 支持根据参数来决定生成哪些文件。告别复制粘贴，用 Plop 来生成模板代码吧~

觉得本文对你有帮助。点个赞，分享给小伙伴们吧~

参考文档

• Plop 官网
• 告别复制粘贴：动态模板生成小技巧