Storybook 入门

您所在的位置：网站首页 › storybooks的中文 › Storybook 入门

Storybook 入门

2023-09-30 22:31| 来源: 网络整理| 查看: 265

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 (

{result}

) } 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 的热更新。

【本文地址】

Storybook 入门

Storybook 入门

今日新闻

推荐新闻