前言
本文旨在对React中引用Antd组件时，针对IE浏览器的兼容。
方法1 下载polyfill文件并由html文件引入
1）下载或者直接引用polyfill文件：https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js
2）将该文件放到跟html模板（此处为index.html）同目录下
3）html模板里面写加载该脚本文件的<script>标签
方法2 引入babel-polyfill
1） 使用npm/yarn命令安装依赖包：babel-polyfill：
yarn -D add babel-polyfill
2）有两种方式，一种是在webpack中的入口(entry)处配置，这样可以使babel-polyfill与编码文件分离，起到全局的作用。而第二种方式则是直接在代码文件中添加引入。
2-1)方式一，在webpack.config.js中配置：
//webpack.config.js
module.exports={
mode: 'development',
devtool: 'eval-source-map',
entry: ['babel-polyfill', path.resolve(base,'app/main.js')], //主要是添加'babel-polyfill'到入口处
//下面的配置在此处省略
}
2-2)方式二，直接在编码文件中引入（跟引入其他包是一样的）：
//其他依赖包...
import('babel-polyfill');
class MyComponent extends Component{
//...
}
兼容IE过程遇到的坑
1) IE浏览器可能存在缓存导致发出的请求后无法及时更新数据的问题，这时候只需要在发出的请求中设置不使用缓存即可，比如React中的Axios.get：
Axios.get(url,{
"headers":{
"pragma": "no-cache"
}
}).then((response)=>{
//...
})
2) 也可以使用moment.js，生成一个时间戳，来阻止ie浏览器的缓存，例如：
const url = `/hello?timestamp=${moment().valueof()}`
Axios.get(url).then(res=>{
//...
});
附录
方法1中，index.html加载'polyfill.min.js'完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
<script src='polyfill.min.js'></script>
</body>
</html>
网友评论