React+Webpack+node+ES6项目的浏览器适配问题（尤其IE)

本项目的文件结构，仅作笔记

image.png

安装依赖

npm install  babel-polyfill es3ify-loader es3ify-webpack-plugin es5-shim react-app-polyfill babel-preset-es2015 uglifyjs-webpack-plugin@1 --save`

在public文件夹下添加es5-shim.js,es5-sham.js两个文件

文件地址 https://github.com/es-shims/es5-shim

src > index.jsx

//****增加ES6转换模块*/
import "babel-polyfill";
import "es5-shim";
import "es5-shim/es5-sham";
//********************** */

webapck.config.js

//引入
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
    //修改入口文件，如修改此处。index.jsx便不需要
    entry: {
        main: ["es5-shim", "es5-shim/es5-sham", "babel-polyfill", "./src/index.jsx"],
        // main: "./src/index.jsx",
    },
    ...
    plugins: [
          ...
        //添加此编译插件
        new UglifyJsPlugin({
        uglifyOptions: {
            ie8: true,
        },
        }),
        ...
      ]
    
    ```
    
>  ## .babelrc
```json
{
    presets:[
    "es2015",
    "react",
    "stage-0"]
}

index.html

<script type="text/javascript">
    function IEVersion() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
      var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
      if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion <= 10) {
          alert("您使用的浏览器版本过低，为正常使用本系统，请升级到IE11或Chrome内核的其它浏览器");
          return;
        }
      } else if (isIE11) {
        return 11; //IE11
      } else {
        return -1; //不是ie浏览器
      }
    }
    IEVersion();
  </script>
  <script src="public/es5-shim.js" type="text/javascript"></script>
<script src="public/es5-sham.js" type="text/javascript"></script>