CRA (create-react-app) IE 兼容方案
原创CRA (create-react-app) IE 兼容方案
原创
kmokidd
发布于 2019-07-25 18:30:39
发布于 2019-07-25 18:30:39
create-react-app IE 兼容方案
项目使用的是腾讯云内部框架 TCFF，原理和 dva 类似。需要使用 craco (或者 react-app-rewired) 覆盖框架的 webpack 和 babel配置。
在 IE （Trident内核）遇到过一下问题
"Map" 未定义
"Set" 未定义
Promise 未定义
对象不支持 "assign" 属性或方法
对象不支持 "find" 属性或方法
对象不支持 "setPrototypeOf" 属性或方法其实都是 ES6 语法不支持导致了，理论上经过 babel 处理后就好。尝试了在入口文件中加入官方提供的 react-app-polyfill 和 babel 文档中指引的引入 core-js，完全不生效。
推测原因是需要在入口文件之前加载，比如 webpack 中的 entry 方式声明。
既然是因为加载不到 polyfill，那就先用内联的方式吧：
<!-- 内联文件需要添加 '/* eslint-disable */ ', 否则无法通过 eslint 检查 -->
<script src="/static/lib/babel-polyfill.min.js"></script>内联之后依然无法解决的问题是”对象不支持 "setPrototypeOf" 属性或方法“。原因是 babel 编译出了IE10 不认识的 __proto__，文档中提供了解决方案 — 也就是添加需要的 plugins (链接不再放出，可根据名字搜索)。
最后我的 craco 配置如下：
// craco.config.js
...
const babel = {
plugins: [
"@babel/plugin-transform-proto-to-assign",
"transform-class-properties",
"@babel/plugin-transform-object-set-prototype-of-to-assign",
[
"@babel/plugin-transform-runtime",
{
absoluteRuntime: false,
corejs: false,
helpers: true,
regenerator: true,
useESModules: false
}
]
]
};
...
module.exports = {
...
babel
};—— 虽然我没有用到，但听说这些方法可以 -----
- core-js 的不同模块可以单独引入，查资料的时候发现有的人通过单独引入可以解决
- core-js 是不支持 IE10 以下的，需要手动引入一个 polyfill：
Object.setPrototypeOf = require('setprototypeof')原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读