记项目重构中的bug

背景

s 我司某个项目一开始是基于 vue3 进行开发的，使用的是开源的 antd UI 组件库，结果开发完了，领导说界面要与公司主产品的 UI 契合，也就是说要改用公司的组件库，然而公司的组件库是基于 react 的，没有办法只能对整个项目进行重构。

项目选型：React@18.2.0 + react-router@6.11.0 + rematch@2.2.0 + typescript@5.0.4 tailwindss@3.3.3，基于 webpack5 搭建了一套脚手架。

随后，我就开始了风风火火的重构之路 🔥

问题

1. 重构比我预计的要顺利，这一套技术栈的开发体检直接拉满，比较坑的是公司的组件库中 TreeSelect 组件有严重的 bug：从表象看，就是下拉时面板点击无反应，大致定位了下，是下拉框的 pointer-events: none 这么个 css 属性的加载时机刚好搞反了你敢信？一度怀疑是不是我哪里用错了。。。或者是我电脑环境（node，os 等）的问题，那么就控制变量进行对比，在同事的电脑上也复现出了这个 bug。

   于是我用 cra 脚手架和公司组件库做了个最小 demo project 给到公司组件库的负责人，然而一个月过去了他也没能解决。

2. 另外一个就是我今天遇到的一个比较奇葩又有趣的问题：关于 [...new Set(arr)]。第一反应，就是一个对数组去重的简单操作罢了。然而，从老项目中拷贝到新项目中使用了[...new Set(arr)] 的公共方法却失效了，使得 echarts 图表没有按照预期渲染出来。稍微调试了一下，发现居然是 [...new Set()] 的锅–于是我在项目中做了一个实验，打印[...new Set([1,2,1])]的输出结果：[Set(2)]，WHAT?! 按照我的预期，难道不应该是 [1,2] 吗？百思不得其解，我又尝试了另一种写法：Array.from(new Set([1,2,1]))，这种就能得到正确的结果，why？

解决

1. 针对 TreeSelect 组件，我有注意到公司组件库兼容antd@4.x，于是我对 atnd4 的 TreeSelect 组件进行了单独封装在项目中使用，后续有时间再去详细看看公司组件库对这个组件是怎么写的吧～
2. [...new Set(arr)]，编译的问题，如上，这种写法其实可以直接使用 Array.from(new Set()) 来代替，但是我这个犟种怎么允许拦路虎呢？发挥我面向 google 编程的能力 😂 由于本人曾对 babel 有过深入的学习，猜测大概率应该是编译过程出了问题，或者说使用了高版本的 es 语法？于是我就谷歌了 [...new Set()] babel 相关的关键词，还真让我找到了一篇文章：Babel6: loose mode，里面有这么一段描述：

   

   简单讲就是：loose mode打开时的缺点就是 -- 在转译es6语法的时候有较低的风险会产生问题。好家伙，我兴奋的去查看我的 babelrc 文件，果然 loose: true…改为 false 后，[...new Set()] 的表现就回归正常了。

最后，对 loose mode 这个配置详细地了解了下。PS：这个 API 官网的描述真的绝了～