React爬坑之路——Antd兼容IE

2018-12-05 本文已影响0人 DeepBig胜

前言

本文旨在对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>