React 兼容IE8 项目

过去的一年里公司项目需要兼容IE8（主要是一些后台管理系统，所以也无需考虑SEO），技术路线选择了React，但是只能使用 react 0.14 版本来实现。经过了几个多页面项目的摸索，对其中涉及的注意点做个总结。

相关技术栈：webpack + react + react-router + @rematch/core + axios + antd + echarts + stompjs-websocket + sockjs-client

项目中业务相关的依赖

1. echarts 绘制图表
2. stompjs-websocket 和 sockjs-client 用于连接 RabbitMQ 消息服务
3. moment 处理日期时间

环境搭建

大部分依赖版本都需要调整，直接使用最新版会无法兼容IE8。
因此只能基于 webpack 手动搭建项目。

建议 Node.js 版本使用10.x，否则部分依赖无法正常运行
此处我使用的是 10.16.3

package.json 文件一览

{
   
  "name": "my-project",
  "version": "1.3.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "start": "webpack-dev-server --watch-poll --hot --inline --progress",
    "build": "webpack --config webpack.prod.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "ie": "webpack --config webpack.ie.config.js"
  },
  "keywords": [
    "react",
    "ie8"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "autoprefixer": "^7.2.4",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-import": "^1.11.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.28.8",
    "es3ify-loader": "^0.2.0",
    "es3ify-webpack-plugin": "0.0.1",
    "es5-shim": "^4.5.13",
    "export-from-ie8": "^1.0.5",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "0.8.2",
    "resolve-url-loader": "^3.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  },
  "dependencies": {
   
    "@rematch/core": "^1.1.0",
    "antd": "1.11.6",
    "axios": "^0.18.0",
    "dom-align": "^1.6.7",
    "echarts": "^4.2.1",
    "moment": "^2.24.0",
    "rc-align": "^2.3.6",
    "react": "0.14.9",
    "react-dom": "0.14.8",
    "react-redux": "^4.4.10",
    "react-router": "2.3.0",
    "sockjs-client": "^1.3.0",
    "stompjs-websocket": "^4.1.7"
  }
}

dependencies 中对 antd 的相关依赖（dom-align 和 rc-align）做了版本降级处理，以便兼容IE8。

1. 项目目录结构

   - public/  #模板资源目录
   	- resources/  #CDN资源本地化目录
   	- favicon.ico
   	- index.html
   - src
   	- api/  #http请求相关
   		- config.js  #axios配置
   		- const.js  #请求常量配置
     		- method.js  #请求方法封装
     	- components/  #组件
     	- routes/  #路由管理
     	- static/  #静态资源
   	  	- css/
   	  	- images/
   	  	- js/
   	  	  	- const.js  #数据常量管理
   	  	  	- polyfill.js  #兼容方法封装
    	  	- store/  #rematch数据仓库
     	- utils/
     		- dateTool.js  #日期处理函数
       	- funcTool.js  #工具函数
     	- views/  #页面视图（每个文件夹对应一个入口对应的页面）
     	- index.js
     	- login.js
   - .babelrc
   - .gitignore
   - .npmrc
   - package.json
   - package-lock.json
   - README.md
   - webpack.config.js
   - webpack.prod.config.js
   - webpack.ie.config.js
   

2. webpack 配置

• webpack 开发环境配置

  const webpack = require('webpack'),
    path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    CleanWebpackPlugin = require('clean-webpack-plugin'),
    autoprefixer = require('autoprefixer'),
    es3ifyPlugin = require('es3ify-webpack-plugin');
  
  const ROOT_PATH = path.resolve(__dirname);
  const PUBLIC_PATH = path.resolve(ROOT_PATH, 'public');
  const SRC_PATH = path.resolve(ROOT_PATH, 'src');
  const BUILD_PATH = path.resolve(ROOT_PATH, 'build');
  
  module.exports = {
       
    entry: {
       
      index: path.resolve(SRC_PATH, './index.js'),
      login: path.resolve(SRC_PATH, './login.js'),
    },
    output: {
       
      path: BUILD_PATH,
      filename: 'assets/js/[name].[hash:8].js',
      chunkFilename: 'assets/js/[name].[hash:8].chunk.js'
    },
    resolve: {
       
      extensions: ['', '.js', '.jsx']
    },
    module: {
       
      loaders: [
        {
       
          test: /\.(js|jsx)(\?.*$|$)/,
          loader: 'babel-loader?cacheDirectory',
          exclude: /node_modules/,
          include: path.resolve('src')
        },
        {
       
          test: /\.(png|jpg|jpeg|gif)(\?.*$|$)/,
          loader: 'url-loader?limit=5000&name=assets/images/[name].[hash:8].[ext]'
        },
        {
       
          test: /\.(eot|woff|woff2|ttf|svg)(\?.*$|$)/,
          loader: 'url-loader?limit=5000&name=assets/fonts/[name].[hash:8].[ext]'
        },
        {
       
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        {
       
          test: /\.scss$/,
          loader: 'style-loader!css-loader!postcss-loader!resolve-url-loader!sass-loader?sourceMap'
        },
        {
       
          test