react16 兼容ie9

需求：

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

      <!-- 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"]}
}

完成

react16 兼容ie9相关推荐

Vue 兼容 ie9 的全面解决方案
Vue 兼容 ie9 的全面解决方案参考文章: (1)Vue 兼容 ie9 的全面解决方案 (2)https://www.cnblogs.com/hejun210/p/9228081.html 备忘 ...
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...
兼容IE9的文件上传
前提:做兼容ie9的文件上传需要后台共同配合,靠前端自己的力量是不行的做文件上传, 我几乎把网上能找的文章都看了, 但是在我这就是行不通, 欸, 就是玩儿, 搞得我很火大, 还好实现了, 下面说说 ...
如何说服老板页面兼容IE9+
从以下数据看,我们的页面兼容IE9+是可行的. 注:浏览器市场份额占比,数据来自百度统计(http://tongji.baidu.com/data/browser)和StatCounter(http: ...
使用js-xlsx handsontable 分批次导入Excel数据(兼容ie9)
使用js-xlsx handsontable 可以把本地excel 解析到网页上,然后分批次传入后台. 在chrome 下可以参考 https://github.com/SheetJS/js-xls ...
danmu.js pc端弹幕兼容ie9
关于danmu.js兼容ie9,其实是setTimeout()定时器不兼容的问题,其中有一段代码setTimeout(me.checkRow(me), 0)是这样的,这里如果要兼容ie9,需要将这个段 ...
兼容ie9及以上的截图（基于html2canvas.js）
兼容ie9及以上的截图(基于html2canvas.js) 在公司项目中大胆使用了html5开发,但是偏偏要求兼容ie8以上浏览器,这里不得不骂一句狗日的ie.查了很多资料,发现只有ie9及以上才兼容 ...
vue上传（兼容IE9）
项目中vue文件上传功能原来使用的是element ui组件,头像上传裁剪使用的是vue-image-crop-upload,但是这两个组件只支持到IE10+,现在项目要求兼容IE9,这两个组件就没办 ...
Vue 兼容 ie9 的解决方案
Vue 兼容 ie9 的全面解决方案一.兼容IE主要是从以下几个方面考虑 es6语法兼容 Number对象es6新方法兼容 requestAnimationFrame方法兼容 axios Promi ...

react16 兼容ie9

react16 兼容ie9相关推荐

最新文章

热门文章