在现代的前端开发中，使用 CLI 工具能够提高研发效率和代码质量。而 Angular CLI 便是一个很好的例子。随着 React 生态不断壮大，React CLI 工具也愈发重要。@union/react-schematics 是基于 Angular Schematics，专门为 React 应用提供的脚手架工具。本文将为你介绍如何使用 @union/react-schematics，从创建项目到自定义生成器，详细讲解其使用方法。
安装
在使用 @union/react-schematics 之前，我们需要先全局安装 Angular Schematics。使用以下命令进行全局安装：
--- ------- -- ------------
接着，我们可以使用 npm 或 yarn 对 @union/react-schematics 进行本地化安装：
--- ------- ----------------------- - --- ----- ---- --- -----------------------
安装完成之后，我们就可以通过运行以下命令来验证安装是否成功：
---------- ---------
创建项目
创建 React 项目与创建 Angular 项目类似，我们可以使用 Angular CLI 的命令来快速生成项目骨架。在命令行中，输入以下命令：
-- --- --------- ------------------------------------
这个命令会在当前目录下创建名为 react-app 的 React 应用程序。--collection 参数告诉 Angular CLI 使用 @union/react-schematics 的生成器集合。
生成器
@union/react-schematics 提供了多种生成器，可以帮助你快速创建 React 组件、redux 状态等。下面我们来学习如何使用这些生成器。
组件
使用以下命令可以快速创建 React 组件：
-- - --------------- ------
其中，<name> 是组件名称。为了更好地组织文件，可以使用前缀 _ 来告诉生成器将该组件放在指定目录下：
-- - --------------- -------------------------
这个命令会在 src/components/_common 目录下创建一个名为 Button 的组件，并为其创建组件文件、样式文件和测试文件。
在项目生成器中，你还可以通过以下方式为组件添加一些额外的设置：
-- - --------------- ------------------------- ------
这个命令将为组件创建一个使用 Sass 的样式文件。
Redux 状态
要为应用程序创建一个 Redux 状态，可以使用以下命令：
-- - ----------- ------------ --------- --------------
其中，<state-name> 是状态名称。--module 参数可以指定将状态添加到的模块，如果未指定，则会自动创建一个模块。
生成器会在 src/store 目录下创建一个状态文件，并在指定模块中导入该文件。
自定义生成器
如果现有的生成器无法满足你的需求，你可以使用 @union/react-schematics 提供的生成器生成器 (Generator Generator) 来生成自定义生成器。
首先，使用以下命令创建一个自定义生成器：
-- - --------- ------
这个命令会在 schematics/ 目录下创建名为 name 的目录，并在该目录中创建 index.ts 文件。
接着，打开 index.ts 文件，定义一个生成器：
------ - ----- ----------------- -------------------- ---- - ---- -----------------------------
------ - ------- - ---- -----------
------ ------- -------- --------- --------- ---- -
------ ------ ----- --------- ----------------- -- -
-- --------------- -
----- --- --------------------------- ------ -- ------------
-
-- ----------
------ -----
--
-在这个示例中，我们定义了一个名为 name 的选项，并编写了一个验证逻辑，确保该选项不为空。
最后，在 collection.json 文件中注册你的自定义生成器：
-
---------- ------------------------------------------------------
------------- -
------- -
-------------- ------- -----------
---------- -------------------
-
-
-这个示例将自定义生成器注册到 name 生成器组中。
总结
本文介绍了如何使用 @union/react-schematics 创建 React 项目，并使用其提供的生成器，从组件到 Redux 状态，快速生成代码。同时，我们还演示了如何使用 @union/react-schematics 的生成器生成器来创建自定义生成器。相信通过学习这篇文章，你已经对 @union/react-schematics 有了更深入的了解，希望本文能够成为你学习和使用 React CLI 工具的有力指引。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/194454