简介
bvap-storybook-readme 是基于 React 和 Storybook 实现的一个文档组件库。通过将组件的使用说明放在 README.md 中，并利用 bvap-storybook-readme 将 README.md 文件中的 Markdown 语法实时渲染成展示页面，简化了组件库的开发和使用过程。
安装
通过 npm 安装 bvap-storybook-readme：
npm install bvap-storybook-readme
使用
- 创建项目并初始化 Storybook：
npx create-react-app my-app cd my-app npx -p @storybook/cli sb init --type react
- 安装 bvap-storybook-readme：
npm install bvap-storybook-readme
- 在 .storybook/main.js 中添加 bvap-storybook-readme 的配置：
-- -------------------- ---- -------
-------------- - -
-------- --------------------------- ----------------------------------------
------- -------------------------- ------------------------------ -------------------------
-- -- ---------------------
-------------------- -
-- -- --------- ---
----------- ---------------
-- -- ------- --- -----
------------- - ------ ------- --
-- -- ------ - ---- ---------
----------------- ----
--------------- ----
--
--- 在 package.json 中添加启动命令：
{
"scripts": {
"storybook": "start-storybook -p 6006"
}
}- 在 .storybook/preview.js 中导入组件，并创建展示组件的 Story：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- -------------------
------ - ---------- - ---- ------------------------
-- ----
------ - ------ - ---- -----------
-- -- ---------
------ ------------ ---- -----------------
-- ------ ---------- --------- --------- -----
----- ----------------- - -------------------------
-- -- -----
------ ------- -
------ ---------
---------- -------
----------- --------------------
----- -
------ ----------
-------- ------------
----- --------
--
--------- -
-------- - ------- ------- -------- --
--
----------- -
------- -
-- -- --------- ------------ ------- -----
-------- -------------
--
----- -
-- ---------
------- -
----- -------
--
--
--
--
-- ----------- -------------------------------示例代码
集成组件库示例
1. 创建一个组件库
在 my-app 中创建一个名为 MyComponent 的组件库：
cd my-app npx lerna create MyComponent
2. 安装 bvap-storybook-readme
在 MyComponent 中安装 bvap-storybook-readme：
cd packages/MyComponent npm ini -y npm i bvap-storybook-readme react react-dom styled-components
3. 配置 Storybook 和 bvap-storybook-readme
修改 MyComponent/.storybook/main.js：
-- -------------------- ---- -------
-------------- - -
-------- --------------------------- ----------------------------------------
------- -------------------------- ------------------------------ -------------------------
-------------------- -
----------- ---------------
------------- - ------ ------- --
----------------- ----
--------------- ----
--
--修改 MyComponent/.storybook/preview.js：
-- -------------------- ---- -------
------ - ---------- - ---- ------------------------
------ ------------ ---- -----------------
-- ---------
------ - ------ - ---- ---------------
-- -- ---------- ----
----- ----------------- - -------------------------
------ ------- -
------ ---------------------
---------- -------
----------- --------------------
----- -
----- ---------
--
--------- -
-------- - ------- ------- -------- --
--
----------- -
------- -
-------- -------------
--
----- -
------- -
----- -------
--
--
--
--4. 创建组件
在 MyComponent/src/Button.jsx 中创建 Button 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
----- ------------ - --------------
------ --------- -- ------------ --- --------- - --------- - ------------
----------------- --------- --
----------- --- ---------
- --------------------------------
- ------------------------------------
------- -----
-------------- ------
-------- ---- -----
------- --------
------------ -----
-------- -----
------- -
----------------- --------- --
----------- --- ---------
- --------------------------------
- ------------------------------------
-
-------- -
----------------- --------- --
----------- --- ---------
- ------------------------------------------
- ----------------------------------------------
-
--
------ ----- ------ - -- ----- -------- ------ -------- -------- -- -- -
------------- ----------------- ------------- ----------------- --------------------
------
---------------
--
------------------- - -
------ ----------
-------- ------------
--------- ------
--5. 创建 Storybook 示例
在 MyComponent/src/Button.stories.js 中创建 Button 的 Story：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------
------ - ------ - ---- -----------
------ ------------ ---- -----------------
----- ----------------- - -------------------------
------ ------- -
------ ---------
---------- -------
----------- --------------------
----- -
----- ---------
--
--------- -
-------- - ------- ------- -------- --
--
----------- -
------- -
-------- -------------
--
----- -
------- -
----- -------
--
--
--
--
------ ----- ------- - ------ -- ------- --------- ---导入 MyComponent，使用 bvap-storybook-readme：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------
------ ----------------- ---- -----------------
------ - ------- - ---- ------------------------------
----- ----------------- - ------------------------------
------ ------- -
------ --------------
----------- -
------- -
-------- ------------------
--
--
----------- --------------------
--
------ ----- ------ - -----------------
----------- - -
----- ------------ --------
--结语
bvap-storybook-readme 简化了组件库的开发和使用过程，让开发者可以更加专注于组件的实现和文档的编写。同时，由于 bvap-storybook-readme 基于 Storybook，因此具有 Storybook 功能的组件库依旧可以使用 bvap-storybook-readme 提供的相关功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5709