浏览器兼容问题

IE浏览器

1.Symbol 未定义

解决：添加 babel-polyfill 或者直接引入 https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js。

备注：polyfill 文件需要在其他 .js 文件（尤其是报错的js文件）之前引入。

2. SCRIPT5022 SecurityError。WebSocket on IE10 giving a SecurityError

原因：打开一个本地(内部网)域的 websocket，IE抛出一个安全性错误（SecurityError）

解决：禁用IE识别本地站点的自动算法：Tools > Internet Options > Security > Local Intranet > Sites.

取消选中的 include all local (intranet) sites not listed in other zones ，或者取消所有选中的复选框。

备注：修改后，重启IE浏览器。

3. SCRIPT1006: Expected ')'、SCRIPT1002: Syntax error

原因：IE浏览器不支持es6的一些新语法。

一般项目编译，会将项目根目录下 src 等文件夹下的所有.js|jsx 文件中的 ES6 语法转换成 ES5，且会将node_modules文件夹下所有文件忽略，而部分node_modules 下的包会包含了ES6语法。

SCRIPT1006: Expected ')': 不支持函数的默认参数。如：

function correlation (xMatrix, xMatrix = xMatrix, options = {} ) {
}

SCRIPT1002: Syntax error: 不支持 class。如

class Base {
  constructor() {}
}

解决： 用转换器，将ES6转成ES5。比如 babel。

采用不同工具创建的项目，修改 babel配置的方法不一样。

webpack 配置文件：在 module -> rules 的 babel-loader 的 include 属性中追加 resolve('node_modules')。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules')
        ],
      }
    ]
  }
}

umi@3.1.x：配置 nodeModulesTransform 设置 node_modules 目录下依赖文件的编译方式。nodeModulesTransform

umi@2.x.x：的修改就比较麻烦了。

extraBabelIncludes 属性：定义额外需要做 babel 转换的文件匹配列表，格式为数组，数组项是 webpack#Condition。（尝试修改，但是没有成功）

chainWebpack 属性：修改 webpack 配置。（推荐）

// config.js
export default {
  chainWebpack: config => {
    config.module
    .rule('js-in-node_modules')
    .before('js')
    .test(/\.(js|jsx|ts|tsx)$/)
    .include.add(/node_modules/)
     .end()
    .use('babel')
    .loader('babel-loader')
    .options({
      presets: [
        ['@babel/preset-env', { targets: 'defaults', modules: false }],
        ['@babel/preset-react'],
        ['@babel/preset-typescript'],
      ],
    });    
  }
}

https://github.com/umijs/umi/issues/2025

4. IE浏览器会缓存GET请求

在 get 请求的 url 中增加随机标识。如：时间戳。
请求头 headers 添加两个键值参数。服务端需要在 Access-Control-Allow-Header 里面添加 cache-control、Pragma 字段。
```
['Cache-Control'] = 'no-cache';
['Pragma'] = 'no-cache';
```
修改浏览器配置。Internet选项 >> 浏览历史记录 >> 设置 >> Internet 临时文件的选项改为‘每次访问网页时’
在服务端设置 header(“Cache-Control: no-cache, must-revalidate”)
改为 post 接口

5. This browser lacks typed array (Uint8Array) support which is required by `buffer` v5.x. Use `buffer` v4.x if you require old browser support。（未解决）

备注：将 buffer 版本回退到4.3.0，还是有报错。

npm list buffer
├── buffer@4.3.0
└─┬ umi-plugin-react@1.15.8
  └─┬ webpack@4.41.1
    └─┬ node-libs-browser@2.2.1
      └── buffer@4.3.0  deduped

6. cannot call a class as a function。（未解决）

注：react-dom.production@17.min.js 报错。

7. DOM 对象不支持 remove 属性或方法

原因： IE 浏览器的 Element 对象是没有remove方法的

解决：

引入 element-remove polyfill。

为 Element 对象定义一个 remove 方法：

if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

8. transform: translate|translateY 等对 table 中的 display: table-header-group|table-row-group 元素（thead、tbody）无效。

9. 不支持event.target.files（IE10）

解决：可修改为 event.srcElement.files || event.target.files

10. 不支持 new FormDate() （IE9）

解决：引入 FormData 的 polyfill。参考 https://gist.github.com/Rob--W/8b5adedd84c0d36aba64、https://github.com/henryluki/FormData

11. 无法获取file对象（IE9）

解决：参考 https://blog.csdn.net/weixin_34352005/article/details/91918449、http://www.zhishichong.com/article/83379

浏览器兼容问题概览