webpack5 / antd5 搭建的组件库

测试

npm run dev

UI查看测试

npm run storybook

打包

npm run build

ci 注意事项

• 不需要手打tag, 修改 package.json 的 version，修改 CHANGELOG.md（ci 会自动完成）
• 不要直接在master分支修代码
• 其他分支合并到master自动触发构建发包
• 该分支如果还要用，发包完成后，将master合并回该分支，因为ci构建时在master分支有提交

版本变化说明

• fix: 触发 patch 版本发布（如 1.0.0 → 1.0.1）
• feat: 触发 minor 版本发布（如 1.0.0 → 1.1.0）
• 包含 BREAKING CHANGE: （冒号后面有空格）的提交：触发 major 版本发布（如 1.0.0 → 2.0.0）

提交记录包含BREAKING CHANGE: 的示例如下：

feat: add user

BREAKING CHANGE: 2.0 发布.
详细说明..
1. xxxx
2. xxxx

查看storybook

https://www.chromatic.com/library?appId=650a60cf4d4736816a2ad843&inviteToken=chpi_0ff1e46bb2364ed8beaeb987a997303e

git commit 说明

• commit 规范依据：https://www.conventionalcommits.org/zh-hans/v1.0.0/
• 约束提交规范：husky + commitlint
• ci 发布相关工具：https://github.com/semantic-release/semantic-release

格式

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

例子

# 修复bug 1.1.1 > 1.1.2
fix: 修复xxx方法空值报错

# 新需求 1.1.x > 1.2.x
feat: 新增用户管理

feat(components): 新增 Input 组件

# 破坏性变更 1.x.x > 2.x.x
perf(pencil): remove graphiteWidth option

BREAKING CHANGE: The graphiteWidth option has been removed.
The default graphite width of 10mm is always used for performance reasons

其他提交类型 build: chore: ci: docs: style: refactor: test:

context

• 父子组件，或者夸层级，需要共享数据，需要context
• 底层级消费高层context
• TUIApp 可传各个 context 初始化数据
• 需要修改context，调用各个context 的 dispatch

AppConfigContext // 应用配置：应用名称，功能配置，修改密码接口等 UserContext // 用户角色权限，甚至主题等，需要持久化 ThemeContext // theme，需要持久化 ConfigProvider // and 的 ConfigProvider App // and 的 App RouterProvider // react router 的 RouterProvider LayoutContext // layout Component // 自定义页面/组件

路由

父级有路由，还有children

• /*
• children 包含一个 path为空字符串的路由，用来匹配父级路由

图标库

TUIIcon

使用阿里图标库

TUIIconPark

createFromIconfontCN 只会引入阿里的图标库

• 项目使用 请引入

• 图标更新需要更新 对应的 腾讯云

httpClient / HttpClient

1. 增加/修改 配置

httpClient.post('/ttos/user/getUserInfo', { a: 1 }, {
  headers: {
    h1: 1, // add
    Accept: 'a', // update
  },
});

2. 删除 配置

httpClient.post('/ttos/user/getUserInfo', { a: 1 }, (config) => {
  delete config.headers['Content-Type'];
  return config;
});

3. 新实例新配置

const hc1 = new HttpClient({
  headers: {
    h2: 2, // add
    Accept: 'b', // update
  },
});
hc1.post('/ttos/user/getUserInfo', { a: 1 });

4. 覆盖新实例配置

hc1.post('/ttos/user/getUserInfo1', { a: 1 }, {
  onError() {
    message.error('a');
  },
});

swr

function Com({ id }) {
  const [data, setData] = useState(0);
  const getData = () => {
    setData(id);
  };
  useEffect(() => {
    getData();
  }, [id]);

  return <div>{data}</div>;
}

function ComWithSWR({ id }) {
  const { data } = useSWR('url', httpClient.post);
  const { data: data1 } = useSWR(['url', { id }], httpClient.post);
  return (
    <div>
      {data}
      /
      {data1}
    </div>
  );
}

• 缓存
• 数据依赖
• 重试
• 轮询
• 重复请求去除