# components-library

**Repository Path**: machinist_wq/components-library

## Basic Information

- **Project Name**: components-library
- **Description**: 一个基于antd的react常用组件库以及一个react版的bpmn
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/machinist_wq/components-library
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-28
- **Last Updated**: 2023-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Ant-Design, bpmn

## README

<!--
 * 组件注释
 * @Author: machinist_wq
 * @Date: 2022-05-03 12:50:21
 * @LastEditors: machinist_wq
 * @LastEditTime: 2022-06-30 10:27:20
 * @Description:
 * 人生无常！大肠包小肠......
-->

# components-library

## 介绍

一个基于 antd 的简版组件库，内涵 bpmn 组件

## 软件架构

软件架构说明
采用 webpack、webpack-cli 从 0-1 开始搭建的

## 安装教程

---

1.  cnpm i
2.  run dev 启动
3.  run build 打包

## 使用说明

1.  点击首页按钮切换 bpmn
2.  点击首页按钮切换至组件库
3.  xxxx

## 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

## 特技

无

## 后面要做的事

### 升级到 react18(已完成)

直接升级删除依赖在从新安装

### 接入 ts(已完成)

**_注意：_** 如果引入第三方库提示没有`无法找到模块“@/bpmn”的声明文件。`可以选择在引入的代码前加上`// @ts-ignore`

```
// @ts-ignore
import Bpmn from "@/bpmn"
```

添加 ts-loader，全局新增 tsconfig.json 以及 typings.d.ts 文件

### 安装 react-router-dom v6

- 填写路由表，路由表文件后缀推荐.tsx,不然会报一些乱七八糟不该有的错误，比如`未终止的正则表达式文本。ts(1161)`或者` “Bpmn”表示值，但在此处用作类型。是否指“类型Bpmn”?ts(2749)`
- `webpack.dev.config.js`文件添加`historyApiFallback: true`适配 BrowserRouter

### 添加摇树优化

- 生产环境下设置`mode: 'production'`即可

```
// webpack.prod.config.js
module.exports = {
// ...
mode: 'production',
};
```

#### sideEffects

根据环境的不同进行配置以后，还需要在 package.json 中，添加字段：**sideEffects: false，**告诉 Webpack 哪些代码可以处理。

```
{
   // ...
  "sideEffects": false,
}
```

- sideEffects 默认为 true， 告诉 Webpack ，所有文件都有副作用，他们不能被 Tree Shaking。
- sideEffects 为 false 时，告诉 Webpack ，没有文件是有副作用的，他们都可以 Tree Shaking。
- sideEffects 为一个数组时，告诉 Webpack ，数组中那些文件不要进行 Tree Shaking，其他的可以 Tree Shaking。

对于那些直接引入到 js 文件的文件，例如全局的 css，通过 import 这样的形式引入的 CSS 就会被当作无用代码处理掉，为了解决这个问题，可以在 loader 的规则配置中，添加`sideEffects: true`，告诉 Webpack 这些文件不要 Tree Shaking。

### css 代码抽离

记得要添加压缩插件

### 代码拆包

webpack 基本已经带了暂时不需要额外配置

```
splitChunks: {
  chunks: "all",
},
```

### 设置环境变量

`npm install --save-dev cross-env`

```
// package.json
{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --mode=production  --progress --hide-modules"
  },
}
```

### 第三方库抽离

### 图片压缩

### 等等...

现在就是启动特别的慢，热更新也很慢

### workbox-webpack-plugin

这是坑 没弄明白之前千万别乱弄 这东西换缓存