安装下面的包
npm install --save @storybook/react
npm install --save @storybook/addon-actions
npm install --save @storybook/addon-links
npm install --save @storybook/addons
在package.json平级目录下放置.storybook文件夹
/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook
文件夹内放置文件
/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook/config.js
import { configure } from '@storybook/react';
const req = require.context("../src", true, /.*.stories.js/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
const req = require.context(“../src”, true, /.*.stories.js$/);
会帮助扫描src文件夹内任意位置 ( 包含所有递归子路径 ) 下的 *.storiest.js 文件
然后我们尝试添加一个helloworld文件
/Users/lizhe/Documents/DEV/projects/es6/study/app/src/lz/lztest.stories.js
import React from "react";
import { storiesOf } from "@storybook/react";
storiesOf("lztest", module).add("Lz test 2", () => (
<div>hello world 2</div>
));
最后来看一下package.json文件
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@storybook/addon-actions": "^3.4.8",
"@storybook/addon-links": "^3.4.8",
"@storybook/addons": "^3.4.8",
"@storybook/react": "^3.4.8",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4",
"recompose": "^0.27.1"
},
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
启动命令为
npm run storybook

如果需要引入css文件可以直接定义在config.js中
import { configure } from “@storybook/react”;
import “../src/css/”;
import “./style.css”;