简介
@beisen/storybook-core 是一个用于构建 React 组件库的开源工具，它基于 Storybook 实现了组件库的开发、文档编写、交互调试、测试等功能。同时，@beisen/storybook-core 还支持插件扩展和主题定制。
安装和配置
全局安装 @beisen/storybook-core：
npm install -g @beisen/storybook-core
在项目根目录下创建
.storybook文件夹，并新建main.js文件和preview.js文件。在
main.js中添加以下内容：module.exports = { addons: [ '@beisen/storybook-core/register', // 添加 @beisen/storybook-core 插件 ], }在
preview.js中添加以下内容：// 引入 @beisen/storybook-core 样式 import '@beisen/storybook-core/dist/styles.css';
在
package.json中添加"storybook": "start-storybook"命令。
使用方法
创建故事
在项目中创建 .storybook 文件夹并创建 stories.js 文件，该文件中编写组件的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- ------------------------- ------ ------ ---- ---------------- ------------------- ------- --------------- -- -- ------------- ---------------- --------------- -- -- ------- ----------------------- ---------------- ---------------- -- -- ------- -------------- -----------------
上述代码创建了一个名为 Button 的组件，添加了三个故事（Story）：default、outline 和 disabled，分别对应 Button 组件的默认样式、描边样式和不可用状态。
启动 Storybook
在项目根目录下执行以下命令启动 Storybook：
npm run storybook
在浏览器中打开 http://localhost:6006/，即可看到组件库的首页。
调试组件
在 Storybook 中调试组件非常方便，只需点击故事页面上的组件即可进入交互调试模式，实时改变组件属性查看渲染效果，非常适合快速迭代组件样式。
测试组件
@beisen/storybook-core 支持使用 Jest 编写组件测试用例，并在 Storybook 中执行测试用例。只需在项目根目录下添加 test 目录，并编写测试用例代码。
具体示例代码请参见 @beisen/storybook-core 官方文档。
总结
@beisen/storybook-core 是一个很好用的组件库开发工具，它支持组件编写、文档编写、交互调试、测试等多个环节，使组件开发变得更加高效和便捷。同时，@beisen/storybook-core 还支持插件扩展和主题定制，更好地适应不同的开发场景和业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128069