bestest 组件库

bestest前端公共组件库，基于React,tea组件

组件文档

组件文档
基于dumi 1.x开发

如何接入？

提供两种方式：

• module federation：轻量简洁，适用于webpack5+构建的项目，私有化部署不推荐
• systemjs 引入
• tnpm包安装

具体接入例子在/example目录下可以找到。

module federation

组件库CDN资源地址：https://utest-web-platform-main-1254257443.cos.ap-guangzhou.myqcloud.com/utest-component/mf。

前提

• webpack5+构建
• vite项目参考
• react 16.8以上版本
• 安装tea组件

1. 修改webpack配置，加入ModuleFederationPlugin，关联远程组件库，共享react依赖

   const { ModuleFederationPlugin } = require('webpack').container;
   module.exports = {
     plugins: [
       new ModuleFederationPlugin({
         remotes: {
           'utest-component': 'utestComponent@https://utest-web-platform-main-1254257443.cos.ap-guangzhou.myqcloud.com/utest-component/mf/remoteEntry.js',
         },
         shared: ['react'],
       }),
     ],
   };

2. 修改入口文件，把react依赖收拢到异步模块里

   参考webpack官方文档中推荐的做法，把原本的直接引用react的入口文件改成异步加载，使得入口文件和react是异步依赖关系。

   entry.jsx（原入口文件）

   import React from 'react';
   
   // App渲染

   async-entry.js（新的入口文件，以异步形式引入原入口文件）

   import('./entry.jsx');

3. 业务中以react异步组件方式来使用

   import React from 'react';
      
   const BaseTagSearch = React.lazy(async() => import('utest-component/BaseTagSearch'));
      
   export default function App() {
     return (
       <div>
         <React.Suspense fallback="loading...">
           <BaseTagSearch />
         </React.Suspense>
       </div>
     );
   }

4. 在项目主入口文件引入tea.css

import 'tea-component/dist/tea.css';

module federation方式的完整接入demo可以参考本项目下的/example/mf。

此组件库的构建产物经过了一个额外转化来解决qiankun中的一个变量挂载问题（issue），可看/scripts/string-replacer.js中的StringReplacerPlugin说明。

systemjs方式

1. 自行在项目中引入全局System变量

   比如在项目的html文件加入script，引入Systemjs：

   <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>

2. 在全局变量中提供React

   import React from 'react';
      
   window.React = React;

3. 业务中以react异步组件方式使用，可通过component-loader加载

   component-loader：参考example

4. 关闭webpack对system的解析（如果使用webpack且版本<5）

module.exports = {
  module: {
    rules: [
      { parser: { system: false } },
    ],
  },
};

systemjs方式的完整接入demo可以参考本项目下的/example/system。

tnpm 包安装

1. 安装tnpm

$ npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --proxy=http://r.tnpm.oa.com:80 --verbose

2. 安装 tea组件, utest组件库依赖包

tnpm i tea-component
tnpm i @tencent/utest-component

3. 在项目主入口文件引入tea.css

import 'tea-component/dist/tea.css';

4. 导入组件

import {BaseTagSearch} from '@tencent/utest-component'

export default () => {

  return <BaseTagSearch />
}

tnpm 方式方式的完整接入demo可以参考本项目下的/example/lib。 vite项目 报global undefined 问题在vite.config.ts文件加添加

define: {
  global:{}
}

如何开发？

$ npm i

开发规范

└──src 
   ├── assets
   │   ├── images -- 图片
   │   ├── themes -- css
   │   └── index.less   ----- 导入css
   ├── changelog
   ├── components
   │    └──{component-name}   ----- 组件名
   │       ├── component.tsx --- 组件文件
   │       ├── index.md --- 在线文档md
   │       └── index.tsx --- mf,syetemjs 入口文件
   └── index.ts   ----- 导出组件

css单独分离出来放入assets/themes文件夹中，css文件命名与组件名相同
新增的less文件需要在assets/index.less文件中导入

1. 在线文档开发

$ npm run dev

参考文档

• 发布

// 默认版本
$ npm run deploy
// 发布固定版本
$ npm run deploy:version

分发到 gh-page分支
流水线
服务

2. module federation 组件开发

$ npm run dev:mf

• 发布

$ npm run build:mf

分发到 mf分支
流水线
CDN

3. systemjs 组件开发

• 发布

$ npm run build:system

分发到 system分支
流水线
CDN

4. tnpm 包开发

$ npm run dev

• 发布

更新 package.json version 手动更新 或 npm version patch

$ npm run build
// 如果已登录则跳过此步骤
$ tnpm login
$ tnpm publish

tnpm 登录指引

• 版本管理

三级版本号管理
major.minor.patch
主版本(major), 次版本(minor)，补丁版本(patch)

框架不变 major 不变
新增组件 更新 minor
修改组件及 bug 更新 patch

• 流程图