前端项目在windowsXP系统(chrome49)上兼容性问题

需求介绍：
支持windowsXP系统下的chrome浏览器正常运行前端项目，XP系统最后支持的chrome版本是chrome49，所以需要兼容好chrome49，主要是把遇到的几个坑在这里分享一下，如果有要兼容chrome49的小伙伴可以参考一下。

前端主要用到的技术react、antd、three.js。

问题1:
先把polyfill加上，在webpack配置入口文件加上@babel/polyfill，项目运行正常。后面发现进入到另一个页面的时候报错了，xxx.flat is not a function。是因为@babel/polyfill只会处理js语法提案小于stage4阶段的规范，官方已经不建议用了，改用'core-js'和'regenerator-runtime/runtime'。我是在webpack入口全量引入了，也可以在入口文件里引入，还可以做按需优化通过配置useBuiltIns : "usage"。

entry: ['core-js', 'regenerator-runtime/runtime', path.resolve(__dirname, `./src/main.tsx`)],

问题2:
很多node_modules里的依赖包chrome49下不能直接运行，虽然node_modules下的包都是经过编译的但是还没有能兼容到chrome49的程度。也就是说我们需要把node_modules里那些语法报错的依赖包重新编译一次，webpack默认不会编译node_modules中的包，所以需要对配置做修改。

注意：你的配置里如果有这个.bablerc文件那么webpack配置完成后node_modules依然不会被编译，需要把.bablerc改成bable.config.json文件。

 rule: [
     {
       test: /\.(js|jsx|mjs)$/,
       exclude: function(modulePath) {
         if (/node_modules/.test(modulePath)) {
           // three.js不排除，需要编译
           if (/three\/build/.test(modulePath)) {
             return false;
           }
           // 其他node_modules排除 不需要编译
           return true;
         } else {
           // 非node_modules不排除 需要正常编译
           return false;
         }
       },
       use: [
         {
           loader: 'babel-loader',
         },
       ],
     }
 ]

问题3:
antd主题替换不生效，看如下配置，这里其实没有问题，问题在下面。

// webpack.config.js
  import { getThemeVariables } from 'antd/dist/theme.js';
   
  ....
  {
    loader: 'less-loader',
    options: {
      lessOptions: {
        modifyVars: getThemeVariables({
          dark: true,
        }),
        javascriptEnabled: true,
      }
    }
  }

这里的style之前是style: "css"，antd主题替换需要使用less，改成style: true。

// babel.config.json

{
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "style": true
      }],
}

问题4:
报错：Uncaught ReferenceError: exports is not defined

上图是node_modules中的一个js文件，可以看到此文件是commonJS，但是bable默认会把文件都当作es-module模块去处理，此时就会报错。babel提供了配置项可以去自动判断当前的模块是不是es-module模块，在babel配置文件中加入"sourceType": "unambiguous"

问题5:
webgl报错：error creating webgl context，不能创建webgl上下文，不支持webgl导致的，xp系统下需要开启chrome对webgl的支持。 如何开启chrome49支持webgl?
右键chrome快捷键，然后点击‘属性’，在目标一栏 "C:xxxx.exe" --enable-webgl，前面有个空格。注意此处设置完成后需等待10分钟左右才能生效，这里巨坑，不知道是虚拟机问题还是chrome49问题，有待验证。

以上是兼容chrome49遇到的几个问题，完。