使用dva和ant-design组件在IE中的兼容问题记录

参考文章:https://blog.csdn.net/yede0632/article/details/80746264

最近在使用蚂蚁金服的dva脚手架以及ant design组件开发React项目,不得不说dva真的很优秀,很大程度上方便了React项目的开发,尤其需要Redux来管理状态以及处理异步请求,dva帮你集成了大部分你所需要的React组件,并使它们结合使用起来变得简单便捷。

但不可避免地,在开发中也会遇到一些问题,本文就记录下在IE兼容方面遇到的问题以及如何解决。

项目涉及到的模块版本:

[email protected];@babel/[email protected];[email protected](之后降级为2.4.1);[email protected]

项目起初是在Chrome上调试开发的,没有遇到什么问题,但项目需要兼容IE9,所以开始在IE上调试。

(1)Promise 未定义;

起初在IE11上调试,页面渲染是没有问题的,但是对于异步请求(项目中使用fetch调用),会有如下报错:

经过查资料,原来是webpack异步加载时,要求原生支持Promise,解决方法参考:https://www.cnblogs.com/Aoobruce/p/9322928.html

(2)只引入Promise是不够的,IE10以下会报如下错误:

(3)项目中引入了babel/polyfill,但紧接着出现了如下错误:

这个错误在github上找到了:https://github.com/umijs/umi/issues/413#issuecomment-389016598

解决方法就是加入 :

Object.setPrototypeOf = require(‘setprototypeof‘)

至此项目应该是可以在IE9以上环境运行并不报错了。

(4)另外还需要注意的是:在dva的router入口处要按照下面的写法:

并且‘./containers/App‘导出的是函数式的组件。否则IE10以下会报如下错误:

类似如下的写法都是不可行的(虽然不知道为什么):

(5)打包问题:虽然现在可以在IE9环境进行开发调试了,但是当你打包部署后,会发现IE又出问题了:

问题出在roadhog打包过程中,将roadhog版本更新或降级到2.4.1 (项目中版本是:2.4.2)解决问题,参考:

https://github.com/dvajs/dva/issues/1807

https://github.com/dvajs/dva/issues/1696

(6)ant-design官网是不兼容IE9环境的,但是官方文档解释组件是支持IE9及以上环境的,可以通过下面的方式测试组件兼容性:

链接:https://github.com/ant-design/ant-design/wiki/Template-for-Bug-Report-in-IE8-9

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <!-- 引入样式 -->
 6     <link rel="stylesheet" href="https://npmcdn.com/antd/dist/antd.css">
 7     <!-- Polyfills -->
 8     <!--[if lt IE 10]>
 9     <script src="https://npmcdn.com/[email protected]/es5-shim.js"></script>
10     <script src="https://npmcdn.com/[email protected]/es5-sham.js"></script>
11     <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
12     <script src="https://npmcdn.com/[email protected]"></script>
13     <![endif]-->
14     <script src="https://npmcdn.com/[email protected]/dist/react"></script>
15     <script src="https://npmcdn.com/[email protected]/dist/react-dom"></script>
16     <script src="https://npmcdn.com/antd/dist/antd.js"></script>
17     <style>body { margin: 100px; }</style>
18   </head>
19   <body>
20     <div id="example"></div>
21   </body>
22   <script>
23     ReactDOM.render(
24       React.createElement(antd.DatePicker),
25       document.getElementById(‘example‘)
26     );
27   </script>
28 </html>

原文地址:https://www.cnblogs.com/spy66/p/12006067.html

时间: 2024-08-30 11:39:29

使用dva和ant-design组件在IE中的兼容问题记录的相关文章

采用React+Ant Design组件化开发前端界面(一)

react-start 基础知识 1.使用脚手架创建项目并启动 ? 1.1 安装脚手架: npm install -g create-react-app ? 1.2 使用脚手架创建项目: create-react-app antd-start-demo antd-start-demo为项目名. ? 1.3 启动 npm start 2.npm转换为yarn ? 2.1 安装yarn: npm install -g yarn ? 2.2 获取yarn当前的镜像源: yarn config get

前端自动分环境打包(vue和ant design)

现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了. 期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确. 既然有了期望,那么就要开始百度如何去实现呢. 下面先开始介绍ant design的方法: ant design的打包工具是roadhog,那么从roadhog下手. 在roadhog文档中,发现define的配置可以传递给代码. 在ant design pro的issue中搜索中,发现环境变量的配置. 我

2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design.react.es6: 2. 在此之前,只看过一点点 es6 的语法,未实操:react 也只是看过语法,未实操:ant design 是个什么鬼,第一次听说. 3. 所遇的主要问题: (1)ant design 中 table 组件的使用: 引入 Table.Buttton.Col.Row.Select

十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用Antd 1.在项目根目录安装antd[每个项目都安装一次]: npm install antd --save / yarn add antd / cnpm install antd --save 2.在您的react项目的css文件中引入Antd的css[会引入所有css样式]: @import '

ant design pro (十二)advanced UI 测试

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们

Ant Design Pro 中的服务端交互

前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的 effect: 调用统一管理的 service 请求函数: 使用封装的 request.js 发送请求: 获取服务端返回: 然后调用 reducer 改变 state: 更新 model 统一的请求处理都放在 services 文件夹中,并且一般按照 model 维度进行拆分文件 services/ user.js api.js ... 其中,ut

Ant Design of React的安装和使用方法

在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率.我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design.旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源. Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言.它模糊了产品经理.交互设计师.视觉设计师.前端工程师.开发工程师等

React中使用Ant Table组件

一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启动,参考 三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 'react'; import ReactDOM from 'react-dom'; import ExampleTable from './Exam

Ant Table组件

http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件 v一.Ant Design of React http://ant.design/docs/react/introduce v二.建立webpack工程 webpack+react demo下载 项目的启动,参考 v三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 're