antdesign所兼容的浏览器_React爬坑之路——Antd兼容IE 前⾔
本⽂旨在对React中引⽤Antd组件时，针对IE浏览器的兼容。
⽅法1 下载polyfill⽂件并由html⽂件引⼊
2)将该⽂件放到跟html模板(此处为index.html)同⽬录下
3)html模板⾥⾯写加载该脚本⽂件的
⽅法2 引⼊babel-polyfill
1) 使⽤npm/yarn命令安装依赖包：babel-polyfill：
yarn -D add babel-polyfill
2)有两种⽅式，⼀种是在webpack中的⼊⼝(entry)处配置，这样可以使babel-polyfill与编码⽂件分离，起到全局的作⽤。⽽第⼆种⽅式则是直接在代码⽂件中添加引⼊。
2-1)⽅式⼀，在fig.js中配置：
//fig.js
ant安装包mode: 'development',
devtool: 'eval-source-map',
entry: ['babel-polyfill', solve(base,'app/main.js')], //主要是添加'babel-polyfill'到⼊⼝处
//下⾯的配置在此处省略
}
2-2)⽅式⼆，直接在编码⽂件中引⼊(跟引⼊其他包是⼀样的)：
//其他依赖包...
import('babel-polyfill');
class MyComponent extends Component{
//...
}
兼容IE过程遇到的坑
1) IE浏览器可能存在缓存导致发出的请求后⽆法及时更新数据的问题，这时候只需要在发出的请求中设置不使⽤缓存即可，⽐如React中的：
<(url,{
"headers":{
"pragma": "no-cache"
}
}).then((response)=>{
//...
})
2) 也可以使⽤moment.js，⽣成⼀个时间戳，来阻⽌ie浏览器的缓存，例如：const url = `/hello?timestamp=${moment().valueof()}`
<(url).then(res=>{
//...
});
附录
⽅法1中，index.html加载'polyfill.min.js'完整⽰例
<%= htmlWebpackPlugin.options.title %>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。