解决 create-react-app IE 兼容性问题

栏目: IOS · Android · 发布时间: 5年前

内容简介:使用最新版本的 create-react-app(v2.1.0)创建 react 项目时,在 IE 9 & IE 10 中碰到了"Map未定义"的报错:很明显,这是 IE9 对 ES6 的兼容性问题。首先尝试了两种方式:

使用最新版本的 create-react-app(v2.1.0)创建 react 项目时,在 IE 9 & IE 10 中碰到了"Map未定义"的报错:

解决 create-react-app IE 兼容性问题

很明显,这是 IE9 对 ES6 的兼容性问题。首先尝试了两种方式:

  1. 使用 create-react-app 官方提供的 react-app-polyfill ,然后在入口文件 index.js 中引入:
import 'react-app-polyfill/ie9'
  1. 根据 react 官方文档 ,使用 core-js 引入 polyfill:
import 'core-js/es6/map'
import 'core-js/es6/set'

这两种方案的结果是使用 yarn build 打包之后,在 IE9 中运行无问题,但是在开发模式下依然报错。

此时可以断定,是在开发模式中执行的某些代码具有兼容性问题,并且这些代码是先于 index.js 执行的。

于是,通过在 index.html 文件的头部引入 es6-sham 和 es6-shim,保证执行所有代码前执行 polyfill 脚本,解决了该兼容性问题。

...
        <title>React App</title>
        <script src="./es6-sham.js"></script>
        <script src="./es6-shim.js"></script>
    </head>
...

谈到这里可能有同学会问,polyfill、es6-sham、es6-shim 分别是什么呢?

Dr. Axel Rauschmayer 是这么解释的:

A shim is a library that brings a new API to an older environment, using only the means of that environment.

A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. Thus, a polyfill is a shim for a browser API. You typically check if a browser supports an API and load a polyfill if it doesn't. That allows you to use the API in either case.

shim 的意思是“垫片”,polyfill 的意思是“腻子粉”,都有填平间隙的比喻义。唯一的不同在于,polyfill 是特定与浏览器环境的,而 shim 则可以用于各种环境,如 node etc. es6-shim 则是为原生不支持 ES6 的运行环境提供的脚本。

那么,sham 又是什么呢? stackoverflow 中的一个回答是这样的:

The shams , however contain those features that can not be emulated with other code. They basically provide the API, so your code doesn't crash but they don't provide the actual functionality.

sham 的意思是“赝品”,它主要用于模拟一些无法用其他代码实现的 API,防止代码 crash ;但是,它们也无法提供该 API 真正的功能,所以,是一种 saliently fail 的手段。一些常见的 sham 可以参见 es5-shames6-sham

(完)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web API的设计与开发

Web API的设计与开发

[日] 水野贵明 / 盛荣 / 人民邮电出版社 / 2017-6 / 52.00元

本书结合丰富的实例,详细讲解了Web API的设计、开发与运维相关的知识。第1章介绍Web API的概要;第2章详述端点的设计与请求的形式;第3章介绍响应数据的设计;第4章介绍如何充分利用HTTP协议规范;第5章介绍如何开发方便更改设计的Web API;第6章介绍如何开发牢固的Web API。 本书不仅适合在工作中需要设计、开发或修改Web API的技术人员阅读,对想了解技术细节的产品经理、运维人......一起来看看 《Web API的设计与开发》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具