react 循环生成组件

如何从终端生成React组件 (How to Generate React Components from your Terminal)

And speed up your workflow 并加快您的工作流程

Photo by Bernard Hermant on Unsplash 照片由Bernard Hermant在Unsplash上拍摄

Adding a new component can be a cumbersome task, especially if you’re writing tests and using something like storybook. A file structure for a single component could potentially look like this: 添加新组件可能是一项繁琐的任务，尤其是在编写测​​试并使用故事书之类的工具时。 单个组件的文件结构可能看起来像这样：

You can save a lot of time by writing a node script that will take whatever component templates you need and generate these files, rather than writing them all by hand every time. 您可以通过编写一个节点脚本来节省大量时间，该脚本将使用所需的任何组件模板并生成这些文件，而不是每次都手动编写它们。

There are currently npm packages available that you can download and try out, but the added benefit of this approach is that you can tweak the component templates to fit you and your teams needs on a project by project basis. 当前可以下载并试用npm软件包，但是这种方法的另一个好处是，您可以根据项目的不同来调整组件模板以适合您和团队的需求。

您需要什么 (What You’ll Need)

1. File template functions
   文件模板功能
2. A node script to create the files and populates the files
   用于创建文件并填充文件的节点脚本

3. Logic in the script to update the

   components/index.ts

   file (optional)

   脚本中的逻辑更新

   components/index.ts

   文件（可选）

4. An npm script to run the node script (optional)
   一个npm脚本来运行节点脚本（可选）

Let’s start by creating a directory in the root folder of our project to house the template functions and the logic. 让我们从在项目的根文件夹中创建一个目录开始，以容纳模板函数和逻辑。

take .generate_component
touch component_templates.js
touch index.js

组件模板 (Component Templates)

An example of the structure of a basic component that my team uses looks like this: 我的团队使用的基本组件的结构示例如下所示：

components/Navbar/Navbar.tsx 组件/Navbar/Navbar.tsx

In our

component_templates.js

file, we can add a function to generate the component template like so. 在我们的

component_templates.js

文件中，我们可以添加一个函数来生成组件模板，如下所示。

.generate_component/component_templates.js .generate_component / component_templates.js

The function will receive the

name

argument when running the node script. 该函数将收到

name

运行节点脚本时的参数。

Depending on what files you want to include your folder structure, you can add additional component templates. In my case, I want to add the following template functions: 根据要包括文件夹结构的文件，可以添加其他组件模板。 就我而言，我想添加以下模板函数：

• component

  零件

• story

  故事

• test

  测试

• barrel

  桶

The complete file for that folder structure would look like this: 该文件夹结构的完整文件如下所示：

.generate_component/component_templates.js .generate_component / component_templates.js

节点脚本 (Node Script)

The tasks completed by the node script will be: 节点脚本完成的任务将是：

1. Accept an argument (for the component name) from the terminal when running the script
   运行脚本时从终端接受一个参数（用于组件名称）
2. Create a Folder for the new component
   为新组件创建一个文件夹
3. Add desired files to the folder
   将所需文件添加到文件夹

4. Read from the

   components/index.ts

   file and insert new component into it (optional)*

   从

   components/index.ts

   文件并将新组件插入其中（可选）*

* This is assuming that you use a barrel file to export all the components in your components folder . Here is an example of the barrel file that we use for reference: *这是假设您使用桶文件导出Components文件夹中的所有组件。 这是我们用于参考的桶文件的示例：

components/index.js 组件/ index.js

If you don’t follow the pattern of including the newly generated component in

components/index.ts

, then I would suggest removing that block of code in the below example following the comment that says “Optional”. 如果您不遵循在

components/index.ts

中包括新生成的组件的模式，那么我建议在下面的示例中，在标有“ Optional”的注释之后删除该代码块。

.generate_component/index.js .generate_component / index.js

Now that the script and template functions in place, you can run the script by entering the following command in your terminal: 现在脚本和模板功能已经到位，您可以通过在终端中输入以下命令来运行脚本：

node ./generate_component ComponentName

Alternatively, if you don’t want to run the node script directly, you can write an npm script to run the command for you in your

package.json

file. 另外，如果您不想直接运行节点脚本，则可以在

package.json

编写一个npm脚本来为您运行命令 文件。

Here’s an example of what that could look like: 这是一个可能看起来像的例子：

"scripts": {
  "generate-component": "node .generate_component $1"
}

The

$1

in the above script will be whatever component name you pass into the npm script when running it.

$1

在上面的脚本中，将是您在运行npm脚本时传递给它的任何组件名称。

Now that you’ve written your npm script, you can run the following command in your terminal: 现在，您已经编写了npm脚本，您可以在终端中运行以下命令：

npm run generate-component ComponentName

If you executed everything correctly, a new folder should appear in the components folder and added to your

components/index.ts

file. 如果正确执行了所有操作，则新文件夹应该出现在components文件夹中并添加到

components/index.ts

文件中。

I hope that you can incorporate this pattern into your workflow and save yourself a ton of time! 我希望您可以将此模式整合到您的工作流程中，从而节省大量时间！

翻译自: https://levelup.gitconnected.com/how-to-generate-react-components-from-your-terminal-a27741a5b862?source=topic_page---------5------------------1

react 循环生成组件