组件库介绍

组件库的使用

引入组件库

同时需要安装react>=16.8和react-dom>=16.8

> npm i @arco-design/web-react

基础使用

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";

ReactDOM.render(
    <Button type="primary">Hello Arco</Button>, 
    document.querySelector("#root")
);

搭建业务组件库

架构设计

单包架构

一个代码仓库里所有组件打包成一个整体，发布出去一个npm包

多包架构

一个代码仓库包含多个组件代码，会发布出去多个npm包

单包架构

所有的组件看成一个整体，一起打包发布。

优点

• 公共代码易复用
• 展示更聚合，便于维护
• 引入一个包即可使用全部组件

缺点

• 修改一个组件需要更新整个库
• 需要考虑按需加载

多包架构

所有的组件在一个仓库，组件之间单独发包

优点

• 单独发包，升级灵活。
• 在同一仓库下，便于代码管理
• 使用者无需考虑按需加载

缺点

• 组件间相互依赖时，需要通过npm 包引入
• 组合使用时需要安装每一个用到的npm包

技术方案

开发环境

• 打包速度
• 实时预览，如 storybook

样式方案

• Less／Sass，CSS in JS，CSS等 样式方案
• 组件库换肤，样式定制等能力技术方案

产物构建

• 构建工具 webpack，rollup，vite，gulp等
• 产物格式：cjs，umd，es

质量保障

• 测试工具：jest，karma，mocha，enzyme， react-testing-library 等
• 测试类型：单元测试，快照测试，截屏测试，e2e 测试等

对外文档

文档部署

• Demo 展示：Storybook，umijs等
• 静态内容：markdown

组件API提取

• 手写
• 自动提取：ts-docuemnt 等

版本日志生成

• 手写
• 自动提取：从PR提交记录自动提取＠arco-design／changelog

组件设计

1. 接口定义
2. 类名前缀统一
3. 避免行内样式和CSS Modules
4. 避免在JS中直接引入样式文件
5. 注意组件样式的按需加载