@antv/g6@5低版本浏览器兼容性问题

一、背景

我们的项目是比较旧的使用CRA创建的。 客户浏览器的版本是 sogou_explorer-v11.0.0.33862，在g6 v5版本中@antv/layout使用了ml-matrix这个库，其中包含

一个是私有属性#，一个是&&=运算符。

二、过程

1、通过@babel/preset-env预设配合插件的方式（失败了）：

{
  "presets": [
    "react-app",
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 0.5%", "not dead", "chrome >= 49", "not ie 11"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-transform-private-methods", { "loose": true }],
    ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
    ["@babel/plugin-transform-class-properties", { "loose": true }],
    ["@babel/plugin-transform-logical-assignment-operators", { "loose": true }]
  ]
}

2、直接根据报错内容找到node_modules中的源码文件进行修改，在通过 patch-package生成补丁

1、修改源码

2、生成补丁

安装npm i -D patch-package

执行npx patch-package ml-matrix

配置package.json

"scripts": {
  "postinstall": "patch-package"
}