Welder 是一个用于生成 React 组件的工具包，可以自动生成相关的 React 组件、类型、Hook 和测试文件。使用 Welder 可以让开发者花费更少的时间来创建可重用的 React 组件，提高开发效率。
安装
Welder 通过 npm 发布，可以通过以下命令进行安装：
npm install @welder/welder
快速上手
在这个例子中，我们将使用 Welder 创建一个简单的按钮组件。
首先，我们需要创建一个工作目录并初始化 npm：
mkdir my-button cd my-button npm init -y
接着，我们需要安装 React 和 Welder 依赖项：
npm install --save react npm install --save-dev @welder/welder
现在我们可以开始使用 welder 来创建我们的按钮组件。
创建一个按钮组件，我们可以用以下命令：
npx welder component Button
执行这个命令后，Welder 会在当前目录下创建名为 Button 的文件夹，并生成 Button.js、Button.test.js、index.js 和 Button.types.js 四个文件。
Button.js 文件包含一个由 props 驱动的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- -----------------
----- ------ - -- ----- ------ ------- -- -- -
----- ------ - -
--------- ---- --- ------- - ------ - -------
-------- ---- --- ------- - ---- ----- - ----- ------
------------- ------
---------------- -------
------ --------
------- ----------
--
------ -
------- -------------- ------------------
-------
---------
--
--
------ ------- -------Button.types.js 文件即 Button 组件的 React. PropTypes 验证类型：
import PropTypes from 'prop-types';
export const ButtonProps = {
label: PropTypes.string.isRequired,
size: PropTypes.oneOf(['small', 'medium', 'large']),
onClick: PropTypes.func.isRequired,
};Button.test.js 包含了一些测试用例，可以帮助你快速定位组件的错误：
-- -------------------- ---- -------
---------------- ------- -- -- -
----------- ----------- -- -- -
----- ------- - ----------
----- ---- - --------------- ------------ ---- ----------------- ----
-------------------------------
---
--------- ------- ---- --------- -- -- -
----- ------- - ----------
----- ---- - --------------- ------------ ---- ----------------- ----
--------------------------------------
-----------------------------------
---
---最后，将 Button 导出到 index.js 文件中：
import Button from './Button';
export { Button };现在，我们已经创建了一个可以重用的按钮组件，并准备好在项目中使用以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
----- ----------- - -- -- -
-----
------- ------------ ---- ----------- -- ------------------ --
------
--
------ ------- ------------总结
Welder 是一个强大的工具包，可以帮助开发者快速创建 React 组件。通过今天的学习，我们了解了如何安装和使用 Welder 来创建可重用的组件、类型、测试文件和 Hook 等文件。希望这篇文章可以帮助你快速上手 Welder，并提高你的开发效率！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671098dd3466f61ffe00f