急需一个react兼容ie8环境,react小白跪求

#1

最近有一个项目需要使用react开发兼容ie8,小白昨天配置一天总是ie8下报错,跪求兼容ie8的webpack开发环境(webpack了解的也不是很多)

#2

目前主要问题是,开发环境可以在ie8下访问,webpack打包放到服务器ie8报错,附配置

var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包
var HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html
var es3ifyPlugin = require("es3ify-webpack-plugin");

//定义地址
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "src"); //__dirname 中的src目录,以此类推
var APP_FILE = path.resolve(APP_PATH, "app.js"); //根目录文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, "yzy/dist"); //发布文件所存放的目录/pxq/dist/前面加/报错?
module.exports = {
  entry: {
    app: ["babel-polyfill", APP_FILE]
  },
  output: {
    publicPath: "/yzy/dist/", //编译好的文件,在服务器的路径,域名会自动添加到前面
    path: BUILD_PATH, //编译到当前目录
    filename: "[name].js", //编译后的文件名字
    chunkFilename: "[name].[chunkhash:5].min.js" // 主要用于按需加载,生成块状文件
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /^node_modules$/,
        loader: "babel-loader",
        include: [APP_PATH]
      },
      {
        test: /\.css$/,
        exclude: /^node_modules$/,
        loader: ExtractTextPlugin.extract("style", ["css", "autoprefixer"]),
        include: [APP_PATH]
      },
      {
        test: /\.less$/,
        exclude: /^node_modules$/,
        loader: ExtractTextPlugin.extract("style", [
          "css",
          "autoprefixer",
          "less"
        ]),
        include: [APP_PATH]
      },
      {
        test: /\.scss$/,
        exclude: /^node_modules$/,
        loader: ExtractTextPlugin.extract("style", [
          "css",
          "autoprefixer",
          "sass"
        ]),
        include: [APP_PATH]
      },
      {
        test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
        exclude: /^node_modules$/,
        loader: "file-loader?name=[name].[ext]",
        include: [APP_PATH]
      },
      {
        test: /\.(png|jpg|gif)$/,
        exclude: /^node_modules$/,
        loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]",
        //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图
        include: [APP_PATH]
      },
      {
        test: /\.jsx$/,
        exclude: /^node_modules$/,
        loaders: ["jsx", "babel-loader"],
        include: [APP_PATH]
      }
    ],
    postLoaders: [
      {
        test: /\.js$/,
        loaders: ["es3ify-loader"]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production") //定义生产环境
      }
    }),
    new HtmlWebpackPlugin({
      //根据模板插入css/js等生成最终HTML
      filename: "../index.html", //生成的html存放路径,相对于 path
      template: "./src/template/index.html", //html模板路径
      inject: "body",
      hash: true
    }),
    new ExtractTextPlugin("[name].css"),
    //提取出来的样式和common.js会自动添加进发布模式的html文件中,原来的html没有
    new es3ifyPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        properties: false,
        warnings: false
      },
      output: {
        beautify: true,
        quote_keys: true
      },
      mangle: {
        screw_ie8: false
      }
    })
  ],
  resolve: {
    extensions: ["", ".js", ".jsx", ".less", ".scss", ".css"] //后缀名自动补全
  }
};

#3

楼主,我去年也搞了这个,react兼容ie8,开发环境可以跑,product报错,我是打包之后把里面
throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED) 这句替换成return object解决的。。。

其实如果用react,真心别去管ie8了,一堆****

#4

一直报缺少标识符。。。

#5

论坛里有的,你搜一个从零搭建react全家桶教程,作者又写了个兼容IE8的,可以参考参考

#6

react早就不支持ie8了

#7

createClass的时代还是能用的

#8

不能用sagas, 其他的可以支持

#9

嗯,作者写的挺好的。感谢分享,非常感谢。

#10

主要是这边有需求,已经解决

#11

:joy:https://github.com/brickspert/react-family-ie8