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

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