作为前端开发者，我们需要不断地创建新的组件和模块，但是每次手动创建相同的文件和目录会极大地消耗我们的时间和精力。因此，自动化生成组件和模块的工具就显得尤为重要。
在这篇文章中，我将介绍一个非常有用的 npm 包——judex-component-generator。这个包可以快速创建 React 组件，并为其生成相应的目录和文件。
安装
首先，您需要在本地安装 Node.js 和 npm。如果您已经安装了这些程序，您可以使用以下命令来安装 judex-component-generator：
npm install -g judex-component-generator
执行这个命令后，judex-component-generator 将会被全局安装在您的计算机上。
使用
使用 judex-component-generator 创建一个新组件非常简单。您只需要在命令行输入以下命令：
judex-component-generator MyComponent
这里，您可以将 MyComponent 替换成您想要创建的组件的名称。命令行会自动为您在当前工作目录下创建一个名为 MyComponent 的目录，并在该目录下创建名为 MyComponent.js 的组件文件、名为 MyComponent.scss 的样式文件以及名为 index.js 的模块文件。
此外，您还可以通过使用 -d 或 --directory 标志来指定组件应被创建的目录。例如：
judex-component-generator MyComponent -d src/components
这个命令会将 MyComponent 组件创建在 src/components 目录下。
配置
judex-component-generator 可以通过一些配置来满足您的需求。在创建一个新组件时，您可以使用 -t 或 --template 标志来指定您想要的模板类型。这个标志允许您选择内置的模板之一：
judex-component-generator MyComponent -t class
这个命令会使用基于类的模板创建 MyComponent 组件。目前，judex-component-generator 支持两种模板类型：函数式和类。默认情况下，函数式模板会被使用。
您还可以在配置文件中定义默认的模板类型、默认的输出目录以及其他选项。默认情况下，judex-component-generator 使用一个名为 .judexrc 的文件。
您可以在项目的根目录下创建这个文件，并将其所有选项指定为 JSON 对象：
{
"outputDirectory": "src/components",
"templateType": "class"
}现在，当您运行命令时，judex-component-generator 将会根据这些配置来创建新组件。
示例
以下是使用 judex-component-generator 创建一个新组件（基于函数）的常见用例：
judex-component-generator MyComponent
这个命令将创建一个名为 MyComponent 的目录，其中包含以下文件：
MyComponent.js: 包含MyComponentReact 组件的代码。MyComponent.scss: 包含MyComponent组件的样式。index.js: 包含对MyComponent组件的导出。
下面是使用 class 模板创建一个新组件的示例：
judex-component-generator MyComponent -t class
最后，这是使用配置文件创建一个新组件的示例：
在 .judexrc 文件中添加以下内容：
{
"outputDirectory": "src/components",
"templateType": "class"
}现在输入以下命令：
judex-component-generator MyComponent
这将会创建一个基于类的 MyComponent 组件，并将其放置在 src/components 目录下。
结论
judex-component-generator 是一个非常有用的npm 包，它可以让我们更快地创建 React 组件。它可以通过命令行标记和配置文件来配置，而且还提供了内置的函数式和 class 模板。
我建议您在搭建您的下一个 React 项目时尝试使用这个 npm 包来创建组件。相信您会发现这个工具能够大大减少您的开发时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e0282