火狐浏览器低版本6.0兼容处理

1. 环境：打开控制台查看浏览器版本：

2. 如上所示为火狐浏览器6.0，而目前最新版本为95.0，相差很大；

3. 代理调试：打开控制台报错信息如下

Uncaught SyntaxError: In strict mode code, functions can only be declared at top level or immediately within another function.
​​Error: Loading chunk 2 failed.(missing: https://static/js/2.7338f3e8.chunk.js)message: 
"Loading chunk 2 failed.↵(missing: /static/js/2.7f3e8.chunk.js)
"name: "ChunkLoadError"
request: "https://static/js/2.7338f.chunk.js"stack: (...)
get stack: function () { [native code] }
set stack: function () { [native code] }
type: "missing"__proto__: d

4. 网上查找很多资料\

思路：看到上述错误信息，

• 想到是babel编译问题；

• Error: Loading chunk 2 failed；加载文件错误

两个方向Google搜索了很多资料，开始尝试

经过多次调试，基本是两种方案：

• 与pc一样是JS语法转换的问题（babel-poplify）

扩展：

正确使用 @babel/preset-env 与 @babel/plugin-transform-runtime

• babel各个插件

5. 更改思路

“strict mode”编译时什么？

基于node项目经验，知道有“use strict”严格模式

于是重新搜索：“babel/preset-env use strict mode”

在本文章找到了解决方案：How to remove global "use strict" added by babel

['babel-plugin-transform-remove-strict-mode'],

6. 修改后的babel配置信息为

babel: {
    loaderOptions: {
      exclude: [/node_modules[\\/]core-js/, /node_modules[\\/]react-app-polyfill/],
    },
    presets: [
      [
        '@babel/preset-env',
        {
          modules: false,
          useBuiltIns: 'entry',
          corejs: {
            version: 3,
            proposals: true,
          },
        },
      ],
    ],
    plugins: [
      ['@babel/plugin-proposal-class-properties', {loose: true}],
      ['@babel/plugin-proposal-private-methods', {loose: true}],
      ['@babel/plugin-proposal-private-property-in-object', {loose: true}],
      ['babel-plugin-transform-remove-strict-mode'],
      [
        'import',
        {
          libraryName: 'antd',
          style: true,
        },
        'antd',
      ],
    ],
  },