參考文章：https://blog.csdn.net/yede0632/article/details/80746264
最近在使用螞蟻金服的dva腳手架以及ant design組件開發React項目，不得不說dva真的很優秀，很大程度上方便了React項目的開發，尤其需要Redux來管理狀態以及處理異步請求，dva幫你集成了大部分你所需要的React組件，並使它們結合使用起來變得簡單便捷。
但不可避免地，在開發中也會遇到一些問題，本文就記錄下在IE兼容方面遇到的問題以及如何解決。
項目涉及到的模塊版本：
dva@2.3.1；@babel/polyfill@7.0.0-beta.46；roadhog@2.4.2(之后降級為2.4.1)；setprototypeof@1.1.0
項目起初是在Chrome上調試開發的，沒有遇到什么問題，但項目需要兼容IE9，所以開始在IE上調試。
（1）Promise 未定義；
起初在IE11上調試，頁面渲染是沒有問題的，但是對於異步請求（項目中使用fetch調用），會有如下報錯：
經過查資料，原來是webpack異步加載時，要求原生支持Promise，解決方法參考：https://www.cnblogs.com/Aoobruce/p/9322928.html
（2）只引入Promise是不夠的，IE10以下會報如下錯誤：
（3）項目中引入了babel/polyfill，但緊接着出現了如下錯誤：
這個錯誤在github上找到了：https://github.com/umijs/umi/issues/413#issuecomment-389016598
解決方法就是加入 ：
Object.setPrototypeOf = require('setprototypeof')
至此項目應該是可以在IE9以上環境運行並不報錯了。
（4）另外還需要注意的是：在dva的router入口處要按照下面的寫法：
並且'./containers/App'導出的是函數式的組件。否則IE10以下會報如下錯誤：
類似如下的寫法都是不可行的（雖然不知道為什么）：
（5）打包問題：雖然現在可以在IE9環境進行開發調試了，但是當你打包部署后，會發現IE又出問題了：
問題出在roadhog打包過程中，將roadhog版本更新或降級到2.4.1 （項目中版本是：2.4.2）解決問題，參考：
https://github.com/dvajs/dva/issues/1807
https://github.com/dvajs/dva/issues/1696
（6）ant-design官網是不兼容IE9環境的，但是官方文檔解釋組件是支持IE9及以上環境的，可以通過下面的方式測試組件兼容性：
鏈接：https://github.com/ant-design/ant-design/wiki/Template-for-Bug-Report-in-IE8-9
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 引入樣式 --> 6 <link rel="stylesheet" href="https://npmcdn.com/antd/dist/antd.css"> 7 <!-- Polyfills --> 8 <!--[if lt IE 10]> 9 <script src="https://npmcdn.com/es5-shim@4.5.8/es5-shim.js"></script> 10 <script src="https://npmcdn.com/es5-shim@4.5.8/es5-sham.js"></script> 11 <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script> 12 <script src="https://npmcdn.com/jquery@1.x"></script> 13 <![endif]--> 14 <script src="https://npmcdn.com/react@0.14.8/dist/react"></script> 15 <script src="https://npmcdn.com/react-dom@0.14.8/dist/react-dom"></script> 16 <script src="https://npmcdn.com/antd/dist/antd.js"></script> 17 <style>body { margin: 100px; }</style> 18 </head> 19 <body> 20 <div id="example"></div> 21 </body> 22 <script> 23 ReactDOM.render( 24 React.createElement(antd.DatePicker), 25 document.getElementById('example') 26 ); 27 </script> 28 </html>