通过create-react-app创建的项目在IE浏览器空白一片,今天来说说解决方案,支持ie9–ie11。
支持IE11的操作
1.检查node_module里面有没有 ‘react-app-polyfill’ 模块,如果没有,通过命令 npm install react-app-polyfill --save 安装。
2.如果有此模块,接下来需要进行修改配置文件 package.json
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie > 9" // 新增
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie > 9" // 新增
]
}
3.然后在项目的js入口文件index.js顶部引入模块 react-app-polyfill
// IE polyfill
import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
4.执行命令 npm run eject 将配置文件暴露出来(config、scripts、package-lock.json,一般下载的新脚手架的项目根目录中没有config等配置文件,需要通过命令暴露出项目配置文件),然后找到根目录下package-lock.json文件,按照此地址(github地址:添加代码支持IE11)修改package-lock.json文件。
5.删除node_moudles文件夹,然后通过命令 npm install 重新安装,重新启动项目,在IE11看效果,解决!
支持IE10/IE9的操作
1.通过命令 npm install core-js mutation-observer --save 安装模块。
2.然后在项目的js入口文件index.js顶部引入模块 core-js和mutation-observer
// IE polyfill
import "core-js/es";
import "mutation-observer";
import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
3.修改文件config/webpack.config.js,调换位置
entry: [
paths.appIndexJs, // 新增
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
// paths.appIndexJs, // 删除
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
4.按照此地址(github地址:添加代码支持IE10/IE9)修改package-lock.json和package.json文件。
5.通过命令 npm install setprototypeof --save 安装模块
6.手动创建js文件 src/polyfill.js ,写入代码如下:
import setprototypeof from 'setprototypeof';
Object.setPrototypeOf = setprototypeof;
7.index.js引入polyfill.js文件
// IE polyfill
import "./polyfill";
import "core-js/es";
import "mutation-observer";
import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
8.打开IE9和IE10看效果,至此解决!