需求：

• 使用react 做了一个基础的框架，写了一堆代码之后发现ie 的用户占比还是比较高的于是要做ie 的兼容
• 本来想要兼容ie 8以上，但是好像有点困难，改成兼容ie9

进程：

• 创建一个react 的包

  npx create-react-app my-app//如果是yarn 安装
  create-react-app my-app

• 创建的时候需要把react的版本降到对应的版本，进入package.json 文件，找到 react 和react-dom， 修改版本号

  "react": "16.4.1",
  "react-dom": "16.4.1",

• 有一个很关键的文件，就是react-script ，react-script 在后续并不兼容ie，为了兼容ie 需要把版本下降到对应的版本

  //移除
  npm uninstall react-scripts//安装1.x 的比较稳定的版本
  npm i react-scripts@1.x -S

• 删除 原有的node_moduls 文件夹，还有yarn.lock 或者是package-lock.json 然后重新安装
• 运行 npm run eject，把配置信息暴露出来
• 要兼容ie 需要安装 core-js 和 react-app-polyfill， 当然也有其他的polyfill 的解决方案，可以自行选择，在webpack.config.dev.js 文件中找到 entry，查看app 的入口文件是哪个，在入口index.js 文件最上方加上， 注意一定要在 react 和react-dom 之前加

  import 'core-js/es'
  import "core-js/stable";
  import 'core-js/es/map';
  import 'core-js/es/set';
  import 'react-app-polyfill/ie9'
  import 'react-app-polyfill/stable'import React from "react";
  import ReactDOM from "react-dom";

• 到这里为止，使用dev 打开就可以使用了
• 如果要使用 tsx，安装ts-loader

  yarn add ts-loader@3.5.0
  yarn add typescript@2.9.2

  ， 需要修改 webpack.config.dev.js 文件的 module.rules 在onOf 下加上一项

  {test: /\.(ts|tsx)$/,include: paths.appSrc,use: [{loader: require.resolve('ts-loader'),options: {// disable type checker - we will use it in fork plugintranspileOnly: true,},},],},

• 把 resolve.extensions 改为 

  extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', '.web.ts', '.ts', '.web.tsx', '.tsx']

• 使用less，安装less

  yarn add less@3.0.4

  ，less-loader,

  yarn add less-loader@4.1.0

  修改module.rules 在onOf 下在css 前加上一项

            {test: /\.less$/,use: [require.resolve('style-loader'),{loader: require.resolve('css-loader'),options: {importLoaders: 1,},},{loader: require.resolve('less-loader'),options: {importLoaders: 1,javascriptEnabled: true,}}]}

• 如果要使用antd，要兼容ie 9之前的版本需要使用 2.13.11 之前的版本ie8需要用1.x 的版本，在public/index.html 下加上几行兼容的代码

        // 下面两行是antd 的css 样式文件

• 与后端交互发请求，我这边使用的是axios， 这个东西对ie 的兼容也有问题要使用需要用0.17.1以下的版本

  yarn add axios@0.17.1

  之上的只兼容ie11以上的浏览器
• 完整的packet.json 文件

  {"name": "plugin","version": "0.1.0","private": true,"dependencies": {"@babel/polyfill": "^7.12.1","antd": "2.13.11","autoprefixer": "7.1.6","axios": "0.17.1","babel-core": "6.26.0","babel-eslint": "7.2.3","babel-jest": "20.0.3","babel-loader": "7.1.2","babel-polyfill": "^6.26.0","babel-preset-react-app": "^3.1.2","babel-runtime": "6.26.0","case-sensitive-paths-webpack-plugin": "2.1.1","chalk": "1.1.3","core-js": "3","crypto-js": "3.3.0","css-loader": "0.28.7","dotenv": "4.0.0","dotenv-expand": "4.2.0","es3ify-loader": "^0.2.0","eslint": "4.10.0","eslint-config-react-app": "^2.1.0","eslint-loader": "1.9.0","eslint-plugin-flowtype": "2.39.1","eslint-plugin-import": "2.8.0","eslint-plugin-jsx-a11y": "5.1.1","eslint-plugin-react": "7.4.0","extract-text-webpack-plugin": "3.0.2","file-loader": "1.1.5","fs-extra": "3.0.1","html-webpack-plugin": "2.29.0","jest": "20.0.4","less-loader": "4.1.0","object-assign": "4.1.1","postcss-flexbugs-fixes": "3.2.0","postcss-loader": "2.0.8","promise": "8.0.1","raf": "3.4.0","react": "16.4.1","react-app-polyfill": "^3.0.0","react-dev-utils": "^5.0.2","react-dom": "16.4.1","reqwest": "2.0.5","resolve": "1.6.0","style-loader": "0.19.0","sw-precache-webpack-plugin": "0.11.4","ts-loader": "3.5.0","typescript": "2.9.2","uglifyjs-webpack-plugin": "^2.2.0","url-loader": "0.6.2","webpack": "3.8.1","webpack-dev-server": "2.11.3","webpack-manifest-plugin": "1.3.2","whatwg-fetch": "2.0.3"},"scripts": {"start": "node scripts/start.js","build": "node scripts/build.js","test": "node scripts/test.js"},"eslintConfig": {"extends": "react-app"},"jest": {"collectCoverageFrom": ["src/**/*.{js,jsx,mjs}"],"setupFiles": ["/config/polyfills.js"],"setupTestFrameworkScriptFile": "/src/setupTests.js","testMatch": ["/src/**/__tests__/**/*.{js,jsx,mjs}","/src/**/?(*.)(spec|test).{js,jsx,mjs}"],"testEnvironment": "node","testURL": "http://localhost","transform": {"^.+\\.(js|jsx|mjs)$": "/node_modules/babel-jest","^.+\\.css$": "/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|css|json)$)": "/config/jest/fileTransform.js"},"transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],"moduleNameMapper": {"^react-native$": "react-native-web"},"moduleFileExtensions": ["web.js","js","json","web.jsx","jsx","node","mjs"]},"babel": {"presets": ["react-app"]}
  }
  

• 完成