@chen.feng/test v1.0.0

导入

我们项目的发展过程

以INFINITY项目为例，在项目里面主要有两种类型的页面，一种是通过iframe引入的页面，例如集群管理，一种是重构过后的页面例如节点管理、Nas管理等

我们的项目主要经历了三个阶段。以INFINITY项目为例，由之前的html+php+jQuery 到react+antd+mobx再到引入微服务的概念。第一阶段到第二阶段主要是技术栈的变化，第二阶段到第三阶段主要是实现了子系统分离，将不同的子系统分离出来。

tip：微应用的优势：https://gitlab.datatom.tech/frontend/frontend-doc/-/tree/master/doc/微前端架构

组件库研发的必要性

1. 传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用， 而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长， 经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
2. 我们希望一个大且复杂的场景能够被分解成几个小的部分， 这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合
3. 提高前端开发效率，降低WEB维护成本

组件库的好处

1. 产品设计迭代优化时，版本和版本之间的差异性就可以得到很好的解决。
2. 界面设计之间的设计风格和设计样式就会统一。
3. 界面设计的效率和质量会稳定输出。

常用的组件库

1. ElementUI：https://element.eleme.cn/#/zh-CN/component/layout
2. Ant-design：https://ant.design/components/overview-cn/

组件库的一生

1. 前期准备：

   调研并确认需要一个什么的组件库（在项目研发过程中的一些组件收集起来） 研发技术选定：React + antd + less + typescript 再造轮子 组件库需要文档展示：Storybook：Storybook 是一个开源工具，用于单独构建 UI 组件和页面。它可以简化简化了 UI 开发、测试和文档。

2. 开始研发：

3. 打包：通过 gulp 控制流程，清除 dist、打包样式、打包工具方法、打包所有组件、打包每个组件、生成一个组件库、发布组件
4. 发布： 配置包名、版本号、private、description、main、license 登录npm npm login

前端项目中的组件库有哪些

UI-组件库：cow-design

其他库（项目中的其他函数库）

node请求库： @datatom/node-common-lib

前端方法库：cow-utils（暂未使用）

前端hooks库：cow-hooks（暂未使用）