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


  

你可能感兴趣的:(React+Webpack+node+ES6项目的浏览器适配问题(尤其IE))