前言
本文意在帮助读者快速搭建自己的前端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
<