小巧且好用的 plop 自动生成器

2023-12-08 08:43:12

plop 是一款小巧且好用的自动生成器，它可以按照指令生成定制化的文件。在 react 项目中，我们经常会写新的组件，每个组件都会有一些通用的文件，比如：

组件文件（通常是 .js 或 .jsx 文件）
样式文件（通常是 .css 或 .scss 文件）
测试文件（通常是 .test.js 或 .spec.js 文件）

如果每次都手动创建这些文件，不仅耗时耗力，而且容易出错。plop 可以帮助我们自动化这个过程，通过简单的命令就可以生成这些文件。

安装 plop

首先，我们需要安装 plop。可以通过 npm 安装：

npm install --save-dev plop

安装完成后，就可以在项目中使用 plop 了。

创建 plopfile

接下来，我们需要创建一个 plopfile 文件。这个文件用来配置 plop 的行为。通常，plopfile 文件放在项目根目录下。

// plopfile.js
module.exports = function (plop) {
  // ...
};

在 plopfile 文件中，我们可以定义各种生成器。每个生成器都有一个名称和一个动作。名称是生成器在命令行中的名称，动作是生成器执行的函数。

定义生成器

下面是一个定义生成器的方法：

plop.setGenerator('component', {
  description: '创建一个新的 react 组件',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: '组件名称:'
    }
  ],
  actions: [
    {
      type: 'add',
      path: 'src/components/{{name}}/{{name}}.js',
      templateFile: 'templates/component.js.hbs'
    },
    {
      type: 'add',
      path: 'src/components/{{name}}/{{name}}.css',
      templateFile: 'templates/component.css.hbs'
    },
    {
      type: 'add',
      path: 'src/components/{{name}}/{{name}}.test.js',
      templateFile: 'templates/component.test.js.hbs'
    }
  ]
});

在这个例子中，我们定义了一个名为 component 的生成器。这个生成器有两个提示：name，要求用户输入组件的名称。

生成器有两个动作：

第一个动作将创建一个名为 {{name}}.js 的文件，并将其放在 src/components/{{name}} 目录下。该文件使用 templates/component.js.hbs 模板文件生成。
第二个动作将创建一个名为 {{name}}.css 的文件，并将其放在 src/components/{{name}} 目录下。该文件使用 templates/component.css.hbs 模板文件生成。
第三个动作将创建一个名为 {{name}}.test.js 的文件，并将其放在 src/components/{{name}} 目录下。该文件使用 templates/component.test.js.hbs 模板文件生成。