搭建storybook--es6+react+less

1.新建项目文件夹

项目结构如下，其中src存放源代码，.storybook和stories为storybook做准备

---

2.项目初始化

cnpm init -y

---

3.安装storybook

cnpm install --save-dev @storybook/react

---

4.安装es6+react+react-dom+less

cnpm install --save-dev react react-dom es2015 less

---

5.安装loader

cnpm install --save-dev less-loader css-loader style-loader

---

6.新建文件webpack.config.js
.storybook/webpack.config.js

const path = require('path');module.exports = (storybookBaseConfig, configType) => {  storybookBaseConfig.module.rules.push({    test: /\.less$/,    loaders: ["style-loader", "css-loader", "less-loader"],    include: path.resolve(__dirname, '../')  });  return storybookBaseConfig;};

---

7.新建文件config.js
.storybook/config.js

import { configure } from '@storybook/react';function loadStories() {  require('../stories/index.js');  // You can require as many stories as you need.}configure(loadStories, module);

---

8.配置运行脚本
package.json

"scripts": {    "storybook": "start-storybook -p 9001 -c .storybook"}

---

9.编写我们的第一个组件：Welcome
src/components/Welcome/Welcome.js

import React, {Component, PropTypes} from 'react';import './welcome.less';class Welcome extends Component {  render() {    const {name} = this.props;    return (      <div className="welcome">        {name},Welcome to my storybook!!!!!!!      </div>    )  }}export default Welcome;

src/components/Welcome/welcome.less

.welcome{  color: red;  font-size: 35px;}

src/components/Welcome/index.js

import Welcome from './Welcome';export default Welcome;

---

10.编辑stories
stories/Welcome.js

import Welcome from '../src/components/Welcome';export default Welcome;

stories/index.js

import React from 'react';import { storiesOf } from '@storybook/react';import { action } from '@storybook/addon-actions';import Welcome from './Welcome';const name = "Linda";storiesOf('storybook', module)  .add('Welcome', () =>(    <Welcome name={name}/>));

---

11.运行storybook

cnpm run storybook

---

最后，给出完整的项目结构

再给出最终的package.json文件

{  "name": "storybook",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "storybook": "start-storybook -p 9001 -c .storybook"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "@storybook/react": "^3.2.12",    "css-loader": "^0.28.7",    "es2015": "^0.0.0",    "less": "^3.0.0-alpha.3",    "less-loader": "^4.0.5",    "react": "^16.0.0",    "react-dom": "^16.0.0",    "style-loader": "^0.19.0"  }}