【Storybook】Storybook在React中的使用

本文将结合自身使用Storybook近半年的感受从：

• 什么是Storybook？
• 为什么要使用Storybook？
• 如何快速使用Storybook？
• 自定义Webpack配置
• 代理设置

这几个方面来介绍Storybook

---

1. 什么是Storybook？

Storybook 是一个使用户能够独立创建组件，并在隔离的开发环境中以交互方式展示组件的工具。简单说就是组件的展示工具。

2.为什么要使用Storybook？

在React开发的过程中需要写很多各种各样的组件，但是在写组件、调试组件样式时我们经常会遇见这样的问题：

• 无法很直观的看到组件在页面上的呈现效果
• 在组件较多时无法快速找到自己所需要的组件
• 组件无法直观的进行分类管理

而Storybook则可以解决这些问题：

可以对组件进行分类管理，也很方便的查看和调试组件，极大的提高了开发的效率。

3.如何快速使用Storybook？

第1步：安装Storybook及相关依赖

npm install --save-dev @storybook/react

同时还需安装react、react-dom、babel-core、babel-loader依赖

npm install --save react
npm install --save-dev react-dom
npm install --save-dev babel-core
npm install --save-dev babel-loader

第2步：配置package.json文件

在package.json文件中添加下面代码：

{
    "scripts": {
        "storybook": "start-storybook -p 9009 -s public",
    }
}

第3步：创建配置文件

在项目根目录下创建.storybook文件夹，并创建.storybook/config.js文件：

// config.js

import { configure } from '@storybook/react'

function loadStories() {
  require('../stories')
}

configure(loadStories, module)

再在根目录下创建stories文件夹，并创建stories/index.js文件：

// index.js

import React from 'react'
import { storiesOf } from '@storybook/react'

storiesOf('Product & Service', module)
  .add('- PSListItem', () => )
  .add('- PSList', () => )

storiesOf('Shopping Cart', module)
  .add('CartPage', () => )
  .add('SubmissionPage', () => )
  .add('Buyer / OrdersPage', () => )

第4步：启动Storybook

npm run storybook

4.自定义Webpack配置

在.storybook/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true
            }
          }
        ]
      },
      {
        test: /\.(jpg|jpeg|gif|png)$/,
        loader: 'url-loader?limit=1024&name=images/[name].[ext]'
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
      }
    ]
  }
}

5.代理设置

在需要设置代理时，可以在.storybook/middleware.js

// middleware.js

const proxy = require('http-proxy-middleware')

module.exports = function expressMiddleware(router) {
  router.use(
    '/',
    proxy({
      target: 'http://mol.dev.bwoilmarine.com',
      changeOrigin: true
    })
  )
}