react页面兼容ie步骤

The React App is not compatible IE default.If open this app in IE,it will display a blank page.So, you must modify some files .
Step 1:
npm install --save es5-shim es5-shim/es5-sham console-polyfill fetch-ie8 babel-polyfill
Step 2:
Modify this apps entry file that called "index.js"

require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
require('fetch-ie8');
require('babel-polyfill');
const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./App').default;

ReactDOM.render(, document.getElementById('root'));

finally,the content of pakage.json file is:

{
"name": "XXX",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^2.12.7",
"axios": "^0.16.2",
"babel-polyfill": "^6.7.4",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"console-polyfill": "^0.2.2",
"es3ify-loader": "^0.2.0",
"es5-shim": "^4.4.1",
"eventsource-polyfill": "^0.9.6",
"fetch-ie8": "^1.4.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
"script": "^0.1.4",
"webpack": "^3.10.0"
},
"devDependencies": {
"react-scripts": "1.0.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "This project was bootstrapped with Create React App.",
"main": "index.js",
"author": "",
"license": "ISC"
}

Vue 2本身并不直接支持IE浏览器,因为Vue是基于ES5语法和Promise等现代JavaScript特性构建的,而这些在IE浏览器(尤其是较旧版本)中可能存在兼容性问题。为了使Vue应用在IE上运行,你需要采取一些额外的步骤来处理兼容性: 1. 使用Babel转换:Babel是一个JavaScript编译器,可以将ES6+的代码转换为向后兼容的ES5代码。安装`@babel/core`, `@babel/preset-env`和`@babel/polyfill`来配置Babel。 ```sh npm install --save-dev @babel/core @babel/preset-env @babel/polyfill ``` 然后在项目根目录创建`.babelrc`文件,并配置如下: ```json { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@babel/plugin-transform-runtime"], "env": { "targets": { "browsers": [ "last 2 versions", "> 1% in China", // 更具体地针对IE版本 "not dead" ] }, "useBuiltIns": "usage", // 或者 "entry" 选项 "corejs": 3 // 或者更高的版本 } } ``` 2. 引入polyfill库:例如,`@babel/polyfill`或`core-js`可以帮助填补一些缺失的内置对象和API。 ```javascript import "core-js/stable"; import "regenerator-runtime/runtime"; // 如果使用async/await import "es6-promise"; // 用于Promise polyfill ``` 3. 使用polyfill-shim或es6-shim:对于更复杂的API,如Promise、Map、Set、Proxy等,可能需要引入专门的polyfill库。 4. 优化模板:Vue 2的模板语法(如v-if, v-for等)在IE中的性能可能会较差,可以考虑使用渐进增强的方式,对关键部分进行条件渲染,只在支持的浏览器上启用。 5. 检查并修复错误:在开发过程中,利用工具如Babel插件`@babel/plugin-transform-react-jsx`检测和修复React相关的IE兼容问题。 6. 测试:确保在实际环境中对IE进行充分测试,特别是IE9及以下版本,以确保功能正常且无视觉异常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值