在前端开发中，我们经常会使用 Storybook 来展示组件并进行交互测试。而在开发过程中，为了更方便地说明组件的使用方法和注意事项，我们可以使用 npm 包 storybook-readme 来将说明文档和组件放在同一个页面上。
什么是 storybook-readme
storybook-readme 是 Storybook 的插件，它可以帮助我们将 Markdown 格式的说明文档和组件整合到一起，使得说明文档可以直接显示在 Storybook 上的组件页面中。使用 storybook-readme 可以让我们的说明文档更加直观生动，也更加方便快捷。
安装和配置
安装 storybook-readme：
npm install storybook-readme --save-dev
然后在 .storybook/addons.js 文件中引入：
import 'storybook-readme/register';
接着，在需要使用 storybook-readme 的组件 .stories.js 文件中添加：
import { withReadme } from 'storybook-readme';
import Readme from './README.md';
storiesOf('Component', module)
.add('with readme', withReadme(Readme, () => (
<MyComponent />
)));通过 withReadme 方法，我们将 README.md 文件传递给了我们要展示的组件，在 Storybook 中就可以在组件页面中看到说明文档。
使用
在组件的 README.md 文件中，我们可以通过 Markdown 语法来书写说明文档。同时，它也支持 HTML 标签，可以更加灵活地展示图片、代码等元素。
对于代码的展示，我们可以使用代码块：
```jsx <MyComponent />
这样就可以将 JSX 模板展示在说明文档中了。 如果需要插入图片，可以使用 HTML 标签： ```html <img src="./example.png" alt="Example">
总结
通过使用 storybook-readme，我们可以更加方便地编写组件的说明文档，并且这些文档也能够直接集成到 Storybook 的组件页面当中。使用 storybook-readme 可以帮助我们提高前端开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79324