在前端开发中，组件库是一个很常见的概念，它可以提供一系列的 UI 组件来帮助我们快速搭建页面。而仅仅有组件不够，我们还需要组件的预览和文档，这就是 Storybook 的存在目的。
@storybook/core 是 Storybook 的核心依赖，它提供了一个本地的开发环境，你可以在其中编写和预览你的组件。本文将会介绍如何使用 @storybook/core。
安装
npm install @storybook/core --save-dev
配置
添加脚本
在 package.json 中添加以下脚本：
{
"scripts": {
"storybook": "start-storybook"
}
}添加配置文件
在项目的根目录下新建一个 .storybook 目录，并在其中添加 main.js 和 preview.js 配置文件。
main.js 的内容如下：
module.exports = {
stories: ['../src/components/**/stories/*.stories.js'],
};这个配置告诉 Storybook 在 src/components 目录下查找 *.stories.js 文件。
preview.js 的内容如下：
import '../src/styles/global.css';
这个配置文件用于添加全局样式。
写组件
在 src/components 目录下创建一个组件以及一个对应的 *.stories.js 文件。
// Button.js
import React from 'react';
const Button = ({ children }) => {
return <button>{children}</button>;
};
export default Button;-- -------------------- ---- ------- -- ----------------- ------ ----- ---- -------- ------ ------ ---- ----------- ------ ------- - ------ ----------------- ---------- ------- -- ------ ----- ------- - -- -- --------------- ---------------- ------ ----- --------- - -- -- ----------------- ---------------- ------ ----- ----- - -- -- - ------- -------- --------- ------ -------- --------------- --
运行
运行以下命令启动 Storybook：
npm run storybook
Storybook 启动后，在浏览器中访问 http://localhost:6006 即可查看组件的预览和文档。你可以在左侧的菜单中选择组件并查看不同的状态。同时，你也可以在右上角的 Actions 选项卡中执行一些交互动作。
总结
本文介绍了如何使用 @storybook/core 配置并运行 Storybook，以及如何编写组件和预览文件。通过学习本文，你应该可以使用 Storybook 为你的组件库提供更好的文档和预览支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/98570