前言
随着互联网的高速发展，前端技术也日新月异，现在的前端技术栈已经很丰富了，可以使用多种框架、库来快速开发。npm 包也是前端开发的重要工具，可以帮助我们管理和使用各种第三方库和工具。
在这篇文章中，我们将介绍一个非常实用的 npm 包 @nymdev/clay-kiln，这个包可以帮助我们快速构建可复用的 React 组件库。本文将详细地介绍如何使用这个包来创建和管理可复用的 React 组件。
安装
首先，我们需要使用 npm 安装 @nymdev/clay-kiln：
npm install @nymdev/clay-kiln --save-dev
这个命令将会在你的项目中安装这个包，并且把它添加到你的 package.json 文件中。
使用
初始化
在安装完 @nymdev/clay-kiln 后，我们需要在项目中创建一个配置文件来配置组件库的各种选项。使用如下命令可以在项目根目录下创建一个默认的配置文件：
./node_modules/.bin/kiln init
执行完这个命令后，会在项目根目录下生成一个名为 .kilnrc.json 的文件，这个文件就是配置文件。
创建一个组件
使用了 @nymdev/clay-kiln 后，我们可以使用 yarn 或 npm 等工具来创建组件。执行如下命令来创建一个名字叫 Button 的组件：
./node_modules/.bin/kiln component Button
执行完这个命令后，会在项目 src/components/ 目录下生成一个 Button 目录，用于存放组件的相关文件。
组件文件结构
生成的 Button 目录中会有如下文件：
- Button.jsx：组件的主要逻辑代码；
- Button.scss：组件的样式代码；
- stories/Button.stories.jsx：用于展示组件状态的 story；
- Button.test.jsx：组件的测试文件；
- README.md：组件的说明文档。
组件代码
Button.jsx 的代码如下所示：
-- -------------------- ---- ------- ------ ------ - ------------- - ---- -------- ------ --------- ---- ------------- ------ ---------- ---- ------------- ------ ---------------- ----- ------ ------- ------------- - ------ --------- - - --------- -------------------------- ---------- ----------------- --------- --------------- --------- --------------- -- ------ ------------ - - ---------- --- --------- ------ --------- ------ -- -------- - ----- - --------- ---------- --------- --------- -------- - - ----------- ----- ------- - ----------- --------- -------- -- ------------ ---------- -- ------ - ------- ------------------- ------------------- ---------- - ---------- --------- -- - - ------ ------- -------展开代码
Button.scss 的代码如下所示：
-- -------------------- ---- ------- ------- - ----------------- -------- ------- ----- -------------- ---- ------ -------- ------- -------- ---------- ----- ------------ ----- -------- --- ----- ----------- ------- ---------------- ----- ----------- - ----------------- -------- - ----------- ----------- - ----------------- -------- ------ -------- ------- ------------ - -展开代码
storybook
@nymdev/clay-kiln 自动生成了 storybook 的配置文件，我们使用如下命令启动 storybook：
yarn storybook执行完这个命令后，会在浏览器中打开 Storybook 页面，我们可以在这个页面中预览和测试组件。
发布组件
使用了 @nymdev/clay-kiln 后，我们还可以使用如下命令来发布组件：
./node_modules/.bin/kiln publish all
执行完这个命令后，组件将会被发布到 npm 上，并且在 kiln 服务器上生成一个预览地址，我们可以使用这个地址来预览组件。
总结
@nymdev/clay-kiln 是一个非常实用的 npm 包，它可以帮助我们快速构建可复用的 React 组件库。在这篇文章中，我们介绍了如何使用 @nymdev/clay-kiln 来创建和管理组件，以及如何使用 storybook 来预览和测试组件。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bd0967216659e244e94
