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

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

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 来生成模板代码吧~

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

参考文档

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