使用 Plop.js 以光速创建 React 组件

2025-06-07

使用 Plop.js 以光速创建 React 组件

你在 React 应用中工作，现在到了创建新组件的时候，你已经完成了所有步骤。进入组件文件夹，创建一个索引文件，再创建一个样式文件，最后再创建一个测试文件，因为你觉得很酷。完成所有这些之后，你仍然需要连接这些文件并编写足够的代码来使它们运行。你每次都这样做……每次都这样做。

无聊的任务

我假设了很多，但如果这真的是你，那我有个好消息！
如果我告诉你有办法自动化这个无聊乏味的过程，你会怎么想？
相信我，接下来的10分钟将改变你的人生。让我来向你介绍plop.js。

什么是 Plop.js？

用他们自己的话说，它是一种可以节省您的时间并帮助您一致地构建新文件的工具。

它是如何工作的？

这比你想象的要简单，不然我也不会写这篇文章了，哈哈。你只需要创建文件模板，并配置一个非常简单的命令行界面即可。

让我们开始吧

首先，让我们克隆这个简单的反应应用程序，它只有一个基本的反应设置。

git clone git@github.com:ivanms1/parcel-template.git
Enter fullscreen mode Exit fullscreen mode

并导航至该

cd parcel-template
Enter fullscreen mode Exit fullscreen mode

现在让我们安装 plop，在终端上输入：

yarn add plop
# or
npm install plop
Enter fullscreen mode Exit fullscreen mode

生成器

接下来，在根文件夹上创建一个名为的文件plopfile.js，并在其中添加以下内容。

module.exports = function (plop) {
  plop.setGenerator("component", {
    description: "Create a component",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "What is this component's name?",
      },
      {
        type: "input",
        name: "element",
        message: "HTML element (div is default)",
        default: "div",
      },
    ],
    actions: [
      {
        type: "add",
        path: "src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
        templateFile: "templates/Component.tsx.hbs",
      },
    ],
  });
};
Enter fullscreen mode Exit fullscreen mode

我们基本上是在配置一个命令行来生成文件。plop.setGenerator创建一个生成器，第一个参数是生成器的名称，第二个参数是一个包含一些选项的对象，我们可以在其中配置要生成的内容。让我们分析一下本指南中将要用到的选项。

description

非常不言自明，对你的生成器的描述，例如：反应组件的生成器。

prompts

我们向用户提供的一系列步骤、问题或指令，用于获取特定信息。Plop 将这些存储在变量中，以便稍后在模板文件中使用。
在我们的例子中，我们使用input类型提示来获取

  • 组件的名称。
  • 组件的html标签（div、button、a等），默认为div。

message是用户将看到并必须与之交互的文本，通常是一个问题或一个指令。

actions

收集到所有需要的信息后，我们继续执行以数组形式表示的操作。在本例中，只有一个创建文件的操作。

让我们更详细地了解一下这些操作，因为这些操作才是真正发生事情的地方。add创建文件的操作类型，path简单来说就是要创建文件的文件路径。这template是一种用于创建文件的框架。Plop 使用handlebars，这是一种可以生成 HTML 和其他文本格式的模板语言。

您可能已经注意到我们还没有创建模板文件，是的......我们需要这样做。

创建我们的第一个模板

在根文件夹上创建一个名为的文件夹templates，并添加一个名为的文件，Component.tsx.hbs其内容如下。

import React from "react";

interface {{pascalCase name}}Props {}

const {{pascalCase name}} = () => {
  return <div>{{pascalCase name}}</div>;
};

export default {{pascalCase name}};
Enter fullscreen mode Exit fullscreen mode

你可能已经猜到了，我们正在创建一个 React TypeScript 文件，在 Handlebars 中，变量位于双括号 ( {{}}) 内。它将我们从提示符中获取的变量pascalCase转换为 Pascal 命名格式。因此，你在任何位置看到的 都会被替换为组件的名称。name{{pascalCase name}}

虽然这很酷，但到目前为止，我们只是创建了一个包含一些预先编写好的 React 代码的新文件。有一些代码片段扩展可以实现几乎相同的功能。让我们再添加一个样式文件，让它更完整一些。

添加样式文件

我将使用stitches，这是一个类似于样式组件但运行时间接近于零的 css-in-js 库，但您可以随意使用任何您想要的。

让我们首先安装库，在终端运行：

yarn add @stitches/react
# or
npm install @stitches/react
Enter fullscreen mode Exit fullscreen mode

由于我们现在还想创建一个样式文件，因此需要action在生成器中添加另一个样式文件。更新plopfile.js内容如下。

    actions: [
      {
        type: "add",
        path: "src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
        templateFile: "templates/Component.tsx.hbs",
      },
      // new action here
      {
        type: "add",
        path: "src/components/{{pascalCase name}}/styles.ts",
        templateFile: "templates/styles.ts.hbs",
      },
    ],
Enter fullscreen mode Exit fullscreen mode

与第一个非常相似action，现在我们需要添加一个新模板。在templates文件夹中创建一个名为的文件styles.ts.hbs，并添加以下内容。

import { styled } from '@stitches/react';

export const Styled{{pascalCase name}} = styled('{{element}}', {});
Enter fullscreen mode Exit fullscreen mode

只需您的基本 css-in-js 文件，我们即可创建一个样式组件并将其导出。

Component.tsx.hbs需要更新，所以它导入并使用了我们制作的新样式组件。现在它应该如下所示：

import React from "react";

import { Styled{{pascalCase name}} } from "./styles";

interface {{pascalCase name}}Props {}

const {{pascalCase name}} = ({} : {{pascalCase name}}Props) => {
  return <Styled{{pascalCase name}}>{{pascalCase name}}</Styled{{pascalCase name}}>;
};

export default {{pascalCase name}};
Enter fullscreen mode Exit fullscreen mode

现在我们正在讨论，plop 为我们节省了相当多的时间，它生成的不是一个文件，而是两个文件。

要查看其实际效果，最后一步是将以下脚本添加到package.json.

  "scripts": {
    ..., // rest of scripts
    // add this at the end
    "generate": "plop"
  },
Enter fullscreen mode Exit fullscreen mode

我们终于准备好了，坐下来，放松一下，欣赏这场演出。在终端上输入

yarn generate
# or
npm run generate
Enter fullscreen mode Exit fullscreen mode

现在让我们创建一个Button组件。

给组件命名

button当然带有标签。

给组件一个标签

如果一切顺利

成功

让我们检查一下组件文件夹。

import React from "react";

import { StyledButton } from "./styles";

interface ButtonProps {}

const Button = ({} : ButtonProps) => {
  return <StyledButton>Button</StyledButton>;
};

export default Button;
Enter fullscreen mode Exit fullscreen mode

样式文件也在那里。

import { styled } from '@stitches/react';

export const StyledButton = styled('button', {});
Enter fullscreen mode Exit fullscreen mode

猫很惊讶

很酷吧？

好吧，也许这不是那么酷，但希望现在你已经意识到它的潜力。

我尽量简化了流程，只创建了两个文件，但您可以继续尝试，添加任意数量的生成器和操作。每个人/团队都各不相同，您可以根据自己的习惯/风格进行调整。您甚至可以更新现有文件，例如，如果您希望所有组件都拥有一个索引文件。您可以为钩子、页面、助手等创建生成器，一切皆有可能。

我希望你喜欢这篇指南，如果你制作了任何很酷的生成器，请告诉我@ivanms1

感谢您花时间阅读这篇文章，如果您喜欢它，请点赞支持并关注更多内容。

源代码

文章来源：https://dev.to/ivanms1/create-react-components-at-the-speed-of-light-26l4
Devto 翻译
PREV
不要在 Typescript 中使用枚举，它们非常危险😨
NEXT
将 Next.js Link 组件与 Material UI 按钮和菜单项结合使用