前言
在诸多前端工具包中，npm包是开发者常用、常见的工具之一。需要注意的是，每种npm包都有其特点和用途，开发者在使用时需要仔细分辨它们的功能和用法。而本文将介绍一种npm包——Readyty，其可用于快速创建React组件库并生成文档，它会是你在工程化开发中不可或缺的一个工具。
Readyty简介
Readyty是一个基于React和Webpack的工具，用于创建React组件库和文档示例。使用此工具，开发者可以方便地将组件和文档更好地组织和管理。
Readyty中的组件可以通过命令 npm run build:component 快速构建成独立的JavaScript模块，将模块发布到npm中后，其他开发者就能够像使用普通库一样使用这些组件了。同时，Readyty还提供了生成样式文档、自动化测试、代码规范检查等一系列工作流，助力React组件库的开发。
接下来，我们详细介绍如何使用Readyty创建React组件库，并生成文档示例。
Readyty使用教程
准备工作
在使用Readyty之前，需要先安装好Node.js和npm。可以通过以下指令在命令行中检查是否已安装：
node -v npm -v
此外，还需要准备好一个工程目录，在该目录下使用npm初始化一个空的项目，生成package.json文件。
安装Readyty
在命令行中切换到工程目录下，执行以下示例指令：
npm install --save-dev readyty
创建Readyty配置文件
在工程目录下创建一个名为 readyty.config.js 的配置文件，配置文件将会用于开发环境的配置。
touch readyty.config.js
配置文件中包含以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
----- - ------------ - - -------------------
----- --- - --------------------------
----- ------ - ------ -----------
-------- --------------
------------ ------------------
------- -------------
-------- --- -------
--
-------------- - -
------ ----------------------- ------------------
------- -
----- ----------------------- -----------
--------- ------------
-------- ---------
-------------- -----
--
----- --------------
-------- --------------------
---------- -
------ --------
------------ -----------
--
-------- -
----------- -------- ------
--
------- -
------ -
-
----- ----------
---- -----------------
-------- ---------------
--
-
----- -----------------
---- ---------------- ------------- --------------
-
-
--
-------- -
--- ---------------------
--- -------------------
--------- ---------------------
---
--- --------------
----------------------- ----------------------------------- -- --------------
--
--
---------- -
------------ -------------------- ----------
--------- -----
----- ----
--
------------ -
------ -----
--
------------- -
--------- -------------------------- --- ---
------------------- ----
-
--构建组件
在src文件夹中新建组件文件夹，例如button文件夹。然后，在此文件夹中创建一个Button.js和Button.scss。例如：
// src/components/button/index.js import Button from './Button'; export default Button;
-- -------------------- ---- -------
-- -------------------------------
------ ----- ---- --------
------ ----------------
----- ------ - -- --------- -------- -- -- -
------ -
------- ------------------------------
--
--
------ ------- --------- -------------------- ---- ------- -- --------------------------------- ------ - ----------------- ----- ------ ------ ---------- ----- ------------ -- ------- ----- -------------- ---- -------- ---- ----- ------- -------- -
接下来，打开package.json，修改以下内容：
-- -------------------- ---- -------
-
-- ---
------- ------------------
---------- -
------------------ --- --- ----- -- ---------------------- ------- -------- -------------------
------ ------------------- -------- ----------------- -------
--
-- ---
-此处处理完成后，在命令行中执行：
npm run build:component
经过少量等待时间，此时，打开build文件夹，你便可以找到独立的Button组件。你可以将该组件发布到npm中，从而可以让其他开发者使用。
配置文档
Readyty提供了组件文档的快速生成方式，可以在文档页面中展示组件的API文档、示例、使用说明等信息。
组件基础信息配置
在组件文件夹中新增README.md文件，README文件中应当包含组件的使用说明、API文档等信息。
除了README文件外，还需要在组件的index.js文件中加入组件基础信息。
-- -------------------- ---- -------
-- ------------------------------
------ ------ ---- -----------
-- -------------- --
------------------- - -
------------ ------- -- - --------- --- ---- -- -------
------ -
--------- -
------------ ----- ------- -- --- --------
--------- ----
--
-------- -
------------ ---- -------- -------- ---- --- ------ -- --------
-
-
--
-- ------------- --
------ ------- -------Readyty配置文件中加入文档页面
在readyty.config.js配置文件中加入文档页面：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
-------- -
-- --- ----
--- ---------------
------ ------- ----------- -- ----
----------- --------------------------- -- ----------
------------ --------- -- ------
---------- --------- -- ------
--------- ----- -- ----------
---------- ----- -- ---------
------ -
------ -
-------- ----- -- -------
-
-
--
-
--运行文档
现在，终于可以愉快地运行文档了！
执行以下命令：
npm run dev
文档页面会在浏览器中自动被打开。如果一切正常，你将在文档页面上看到已经写好的Button组件。
总结
React组件库开发是前端开发中不可或缺的一个部分，而Readyty作为npm包之一，提供了一种方便的开发方式。在实际开发中，读者可以根据需要自主选择、尝试使用Readyty，掌握它的核心思想，方便地开发出优秀的React组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ab81e8991b448d4b0f