用React build项目,部署后 IE 浏览器打不开(我用的是 IE11),控制台报错:SCRIPT438:对象不支持"assign"属性或方法。
这是 IE 浏览器 对 ES6 的兼容性问题。
解决方法:
使用 create-react-app 官方提供的 react-app-polyfill,然后在入口文件 index.js 中引入:
react-app-polyfill 软件包包括适用于各种浏览器的 polyfill ,包括 Create React App 项目使用的最低要求和常用语言功能。
用法:
安装 polyfill 软件包
可以使用 npm 或 Yarn 安装软件包:
npm install react-app-polyfill
或者:
yarn add react-app-polyfill
如果要在项目中使用,可以这样:
npm install react-app-polyfill --save
或者:
npm install react-app-polyfill --save-dev
引入 polyfill
在项目的 src/index.js 文件的开头加入下面两行代码,一定要放在第一行(最上面),否则会不起效。
import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
polyfill 使用详解
Internet Explorer 浏览器支持
根据项目需求,导入你需要的最低版本的入口点,确保满足使用 Create React App 所需的最低语言功能。
例:如果导入 IE9 入口点,则将同时支持 IE10 和 IE11 。
模块确保存在以下语言功能:
Promise
(为async/ await支持)
window.fetch
(一种基于承诺的方法,可在浏览器中发出Web请求)
Object.assign
(对象传播所需的帮助者,即{ …a, …b })
Symbol
(for…of语法和朋友使用的内置对象)
Array.from
(数组扩展使用的内置静态方法,即[…arr])
如果需要更多功能,请继续往下看。
注意:引入的时候,要放在第一行,否则会不起效。
Internet Explorer 9
// 必须放在 src/index.js 文件的第一行 import 'react-app-polyfill/ie9'; // ...
Internet Explorer 11
// 同样的,将下面一行代码放在 src/index.js 代码的最前面 import 'react-app-polyfill/ie11'; // ...
充填其他语言功能
polyfill 还可以填充目标浏览器中不可用的稳定语言功能。如果您在 Create React App 中使用,它将在 browserslist 导入 stablepolyfill 时自动使用你定义的对象,仅包含目标浏览器所需的 polyfill。
// 放在 src/index.js 的第一行 import 'react-app-polyfill/stable'; // ...
如果你需要同时兼容 Internet Explorer 9 或 Internet Explorer 11 ,应引入 IE9 或 IE11 和 stable 模块:
对于IE9:
import 'react-app-polyfill/ie9'; import 'react-app-polyfill/stable';
对于IE11:
import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
这样一般就能解决 IE 浏览器不兼容的问题了。
原创文章,作者:254126420,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/231389.html