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

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

Plop 介绍

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

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

第 1 步 在项目中安装 Plop

  1. npm install --save-dev plop

第 2 步 配置 Plop

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

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

  1. function main (plop) {
  2.   plop.setGenerator('component', {
  3.       description: '创建组件',
  4.       // 命令行交互
  5.       prompts: [
  6.         {
  7.           type: 'input',
  8.           name: 'name',
  9.           message: '组件名称'
  10.         }
  11.       ],
  12.       actions: data => {
  13.         const componentName = toComponentName(data.name)
  14.         const actions = [
  15.           {
  16.             // 添加组件文件
  17.             type: 'add',
  18.             // 生成的文件的地址
  19.             path: `src/components/{{name}}/index.tsx`,
  20.             // 模板文件地址
  21.             templateFile: `plop-templates/component.hbs`,
  22.             data: {// 传入模板的参数
  23.               componentName
  24.             },
  25.             skipIfExists: true
  26.           },
  27.           {
  28.             // 添加样式文件
  29.             type: 'add',
  30.             path: `src/components/{{name}}/style.scss`,
  31.             templateFile: 'plop-templates/style.hbs',
  32.             skipIfExists: true
  33.           }
  34.         ]
  35.         return actions
  36.       }
  37.   });
  38. }
  40. function toComponentName(name) {
  41.   let nameArray = name.split('-')
  42.   return nameArray.map(item => `${item.charAt(0).toUpperCase()}${item.substr(1)}`).join('')
  43. }
  45. module.exports = main

第 3 步 创建模板文件

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

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

  1. import s from './style.scss'
  3. interface I{{componentName}}Props {
  4.   className?: string;
  5. }
  7. function {{componentName}}({ className }: I{{componentName}}Props) {
  8.   return (
  9.     <div></div>
  10.   )
  11. }
  13. export default {{componentName}}

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

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

第 4 步 增加生成命令

在 package.json 中新增:

  1. "script":{
  2.     ...,
  3.     "new":"plop"
  4. }

第 5 步 运行

  1. npm run new

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

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

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

参考文档