解決create-react-app在ie中打開頁面空白的兼容性問題

最近使用react官方腳手架create-react-app建立項目的時候發現在ie瀏覽器打開時顯示空白，在主流的chrome、fireFox等瀏覽器顯示是正常的。
打開控制台顯示如下

 

 

既然提示了語法錯誤，那么猜想應該是兼容性的問題，看了下瀏覽器的版本號是ie11。首先我翻了下create-react-app的文檔，從中看到了正好有對ie9、ie10、ie11的兼容性問題解決的一個方案。這時需要用到create-react-app這個插件。

文檔地址:
https://facebook.github.io/create-react-app/docs/supported-browsers-features

create-react-app github地址：
https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill
那么下面首先下載這個插件

npm install react-app-polyfill

 

可以先檢查 項目中的 有沒有 這個插件 

react-app-polyfill

我的項目（package.json ）中是有的， 有就不用安裝包了。

 

 

然后在src下的index.js也就是js入口文件中寫入

 

import 'react-app-polyfill/ie11';
//import 'react-app-polyfill/stable';

 

 

 

根據官網的提示，還需要在package.json文件中的browserslist中添加ie11

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

最后重新運行項目發現還是空白但是瀏覽器沒有報錯，把node_moudles刪掉重新安裝后就可以正常打開了。

至此再IE11中應該就解決掉了空白頁面的問題。