react16 兼容ie9

weitao_11

已于 2022-11-29 14:15:38 修改

阅读量1.4k

点赞数 2

分类专栏： react 文章标签： react.js 前端 ie

于 2022-11-29 13:37:43 首次发布

本文链接：https://blog.csdn.net/weitao_11/article/details/128092878

版权

react 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

需求：

使用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 plugin
                  transpileOnly: 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 下加上几行兼容的代码

      <!-- Polyfills -->
      <!--[if lt IE 10]>
      <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
      <![endif]-->
      <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>

// 下面两行是antd 的css 样式文件
      <link rel="stylesheet" type="text/css" href="https://2x.ant.design/index-1.css" />
      <link rel="stylesheet" type="text/css" href="https://2x.ant.design/index-2.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": [
      "<rootDir>/config/polyfills.js"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/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"
    ]
  }
}