1、Promise is undefined && Symbol is undefined
原因：IE不支持ES6的语法。
解决办法：
- yarn add @babel/preset-env --save-dev && yarn add core-js
- babel配置：
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry', //尝试使用usage，会报错，猜测原因是：“usage”选项下，第三方插件需要的依赖没有安装。
debug: true, //terminal 打印每个文件需要的polyfill
corejs: {version: 3, proposals: true}
}
]
]
- 入口文件 import "core-js" (src/index.js)
2、MobX 5+ requires Proxy and Symbol objects.
If your environment doesn't support Symbol or Proxy objects, please downgrade to MobX 4. For React Native Android, consider upgrading JSCore.
原因：IE11不支持Proxy.
解决办法：将mobx降级为4：yarn upgrade mobx@4
3、Header is undefined
原因：IE11不支持new Header方法
解决办法：
- yarn add isomorphic-fetch
- import 'isomorphic-fetch'
4、Object doesn't support property or method 'scrollTo'
解决办法：改为'scrollTop = 0'
5、Failed prop type: Invalid prop xx of type object supplied to xx, expected array
原因：mobx降成4带来的影响。官方文档中提到：在 ES5 中没有继承数组的可靠方法，因此 observable 数组继承自对象。 这意味着一般的库没有办法识别出 observable 数组就是普通数组(像 lodash，或 Array.concat 这样的内置操作符)。
Array.isArray(observable([1,2,3])) //false
解决办法：
- observable.toJS()
- observable.slice()
6、SCRIPT1002: Syntax error
原因：IE不支持箭头函数
babel忽略了node_module，需要手动加入。定位到错误文件是ansi-styles，可以按需加入。
解决办法：
module: {
rules: [{
exclude: /node_modules\/(?!(ansi-styles)\/).*/ //exp1(?!exp2) 查找后面不是exp2的exp1
}]
}
7、Missing class properties transform.
原因: babel配置中缺少相应的plugins
解决办法：
-
- yarn add babel-plugin-transform-class-properties --save-dev
-
- babel.config.js中添加插件
"plugins":["transform-class-properties"]
8、点击下载 / 导出按钮无效
原因：
const anchor = document.createElement('a');
anchor.href = fileURL;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click(); // IE <a>标签不支持下载属性
解决办法： 对IE做特殊处理
if (window.navigator.msSaveBlob) { // For IE
window.navigator.msSaveOrOpenBlob(blob, `${fileName}.json`);
}
参考：zhuanlan.zhihu.com/p/51941539
9、通过file.type来判断Json文件类型无效
原因：json格式的文件在IE中，file.type返回" "
解决办法：通过file.name来识别文件类型
const arr = file.name.split('.');
const fileType = arr[arr.length - 1];
10、get请求使用缓存导致数据不更新
原因：IE发起 GET 请求，当参数一样时，浏览器会直接使用缓存数据。 解决办法： 参数中添加一个当前时间戳来使得参数不一致。
//以axios请求拦截器为例
const axiosInstance = axios.create({
// 当创建实例的时候配置默认配置
headers: {
'Content-Type': 'application/json'
}
});
// 添加请求拦截器
axiosInstance.interceptors.request.use((config) => {
if (config.method === 'get') {
if (!config.params) { //没有参数时
config.params = {};
}
config.params.timestemp = new Date().getTime();
}
return config;
});
11、使用execCommond复制内容时页面右侧出现空白区域
原因：暂未知（欢迎补充）
解决办法：
copyText = (name) => {
const value = `My name is: ${name}`;
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData('Text', value);
} else {
const oInput = document.createElement('input');
oInput.value = value;
document.body.appendChild(oInput);
oInput.select();
document.execCommand('Copy');
oInput.className = 'oInput';
oInput.style.display = 'none';
}
};
12、flex:1 盒子没有撑开，导致兄弟节点位置错误
解析：flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值。
原因：
// IE中的flex:1
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0px;
解决办法：
1、flex:1 1 auto;
2、flex-grow:1;
