Storybook 官网：https://storybook.js.org/docs/guides/guide-react/
Storybook 可支持 React、Vue、Angular 等框架，本文只涉及 React 使用 Storybook。
安装：
自动安装：
使用以下命令，可自动安装。在大多数情况下，Storybook 会判断你使用的是 react 或者 react-scripts，安装合适的包。
npx -p @storybook/cli sb init
如果失败，说明 Storybook 无法判断出你的环境，你可以尝试强制使用 React：
npx -p @storybook/cli sb init --type react
或者如果你使用 Create React App (或者react-scripts)，你应该使用以下命令：
npx -p @storybook/cli sb init --type react_scripts
注意：你的工程下必须有
package.json文件，否则以上命令会失败。
手动安装：
1.安装 Storybook 到你的工程：
npm install @storybook/react --save-dev
确保你的工程依赖有 react、react-dom、@babel/core 和 babel-loader，因为在 storybook 中的 peerDependencies 依赖有这些项。如果没有，则需要执行以下命令(如果有，则可以忽略)：
npm install react react-dom --save
npm install babel-loader @babel/core --save-dev
2.添加 npm 脚本：
在 package.json 文件中添加一个新的script，之后可以使用 npm run storybook 启动 storybook 。
// package.json
{
"scripts": {
"storybook": "start-storybook -p 9001"
}
}
如果不指定端口，则 Storybook 使用随机端口。
- 在项目根目录创建.storybook目录：
在该目录下配置 Storybook 可以找到 stories 的方法有两种，可选择其中一种：
- 创建 main.js 文件，添加以下内容：
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
};
这将会加载在 ../src 目录下匹配 *.stories.[tj]s 模式的所有 stories。也可以根据实际情况更改。
- 创建 config.js 文件，添加以下内容：
// .storybook/config.js
import { configure } from '@storybook/react';
const req = require.context('../stories/', true, /\.js$/);
function importAll() {
req.keys().forEach((filename) => req(filename))
}
configure(importAll, module);
这将会加载在 ../stories 目录下(包含子目录)所有匹配 /\.js$/ (以.js结尾的文件) 正则的文件。require.context 函数参数可根据实际情况更改。
补充：
如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，可以使用require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync')。此函数接受三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。
- 根据 .storybook/main.js 或者 .storybook/config.js 中配置的
stories存放的目录新建 stories 文件。示例在 .storybook 同级目录下新建 stories 文件夹并创建 userStory.js 文件，添加以下内容：
// stories/userStory.js
import { storiesOf } from "@storybook/react";
import { userHooks } from '../src/index'
import React from 'react';
const Demo = () => {
const result = userHooks();
return (
<div>
<p>{result}</p>
</div>
)
}
storiesOf("user", module).add('Demo', Demo);
userStory 依赖的 userHooks 代码如下：
// src/index.js
export { default as userHooks } from './userHooks'
// src/userHooks.js
export default function log() {
console.log('use user hooks');
return 'Hello React Hooks';
}
- 在根目录执行命令
npm run storybook运行 Storybook：
image.png
如果更新了代码，可以在 Storybook 上立即看到更新后的状态，因为 Storybook 使用了 Webpack 的热更新。
网友评论