React + Storybook + Lerna 构建自己的前端UI组件库

前言

本文意在帮助读者快速搭建自己的前端UI组件库，构建-打包-发布，帮你解决大型web前端应用中组件重用的问题.

React

自2014年以来，react不断地发展壮大，时至今日已经发展成为最受欢迎的前端框架，如果你还不太了解react，请看这里。

Storybook

storybook是一套UI组件的开发环境，它允许你浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。 storybook允许你独立于你的app来开发你的UI组件，你可以先不关心应用层级的组件依赖，快速的着手组件的开发，而后再将之应用于自己的app中。尤其在大型应用，跨团队合作过程中，良好的组件抽象，使用storybook封装管理，可以极大的提高的组件的重用性，可测试性，和开发速度。你可以点击这里查看storybook是如何工作的。

Lerna

lerna帮你管理你的包集合，当你自己的library变多时，你的版本控制，跟踪管理，测试就会变得越发复杂，lerna正是帮你解决这个问题，它使用npm和git来帮助你优化你的多包管理流程。

本文假设你已经熟悉发布自己的npm包，如果不熟悉，可以先查看相关文章，例如《怎么开发一个npm包》；

接下来我们就一步一步来搭建自己的UI组件库。

构建

一. 初始化react app；

有很多教程帮助我们如何搭建一个前端react app，本文重点不在react的原理，生命周期函数等使用上，这里选择facebook官方提供的脚手架create-react-app来快速构建一个react app，注意你的node版本（推荐>=6, 你可以使用nvm来帮助你管理node版本，npx comes with npm 5.2+ and higher）。

npx create-react-app my-app
复制代码

初始话成功后你会得到一个如下的工程目录：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js
复制代码

然后执行：

cd my-app
yarn start
复制代码

此时你就可以通过访问你的http://localhost:3000/ 来查看你初始化好的app了；

二. 初始化storybook

如果你是第一次安装storybook，尝试以下命令：

npm i -g @storybook/cli
cd my-app #(the app above)
getstorybook
复制代码

此时你会得到一个如下的工程目录：

my-app
├── .storybook
│   └── addons.js #(storybook的包依赖)
│   └── config.js #(配置文件，告诉storybook去加载哪些定义好的组件集合)
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    ├── stories
    │   └── index.js  #(storybook的组件集合，你需要在这里添加你创建好的UI组件)
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js
复制代码

一旦你安装好，此后可以执行yarn run storybook来起本地storybook开发环境server，访问相应的url, 如http://localhost:9009/你会看到一个包含简单示例的storybook交互界面:

三. 开发自己的组件

接下来让我们来开发自己的两个button组件并且加入到storybook中：

在src目录下新建 StateFulReactButton.js

import React, { Component } from 'react';

class StateFulReactButton extends Component {
  render() {
    const { handleOnclick } = this.props;

    return (
      <button onClick={handleOnclick}>react stateful button</button>
    );
  }
}

export default StateFulReactButton;

复制代码

同时新建 StatelessReactButton.js

<