对象不支持"startsWith"属性或方法----polyfill 解决ie浏览器兼容问题

create-react-app脚手架构建的项目

技术栈：react+react-router-dom+antd+mobx+mobx-react

使用antd，项目运行在ie浏览器时，会报错，应在入口文件中引入polyfill

然后我们重新跑项目，依然遇到了问题，先来感受一下：

antd官方文档提示我们遇到这个问题要引入babel-polyfill，又要对webpack进行配置。

在此之前项目没有d出内建，此时npm run ejectd出了内建配置

（此时的less和antd配置见： https://www.jianshu.com/p/ccdb52ac6a41 ）

继续进行配置在webpack.config.dev.js和webpack.config.prod.js中entry数组中添加一项，如下：

此时这个报错解决了，关于babel-polyfill的具体说明： https://babeljs.io/docs/en/babel-polyfill/

题主的项目应用常规的vue-cli3构建项目，在兼容IE浏览器时遇到的问题，做一下记录。

IE 11版本浏览器不支持ES6百分之85%的语法规范，在vue项目中选择使用babel-polyfill兼容语法。

这里尽可能在首行引入；注意一下node_module中polyfill的文件路径，有的可能是 import '@babel/polyfill' 这种情况。

配置内容如下：

链式webpack配置函数

一个shim就是一个库，它将一个新的API引入到一个旧的环境中，而且仅靠旧环境中已有的手段实现。

关于polyfill，据说来自于Polyfilla，Polyfilla是一个英国产品，在美国称之为Spackling Paste(译者注：刮墙的，在中国称为腻子)，把旧的浏览器想象成为一面有了裂缝的墙，这些polyfill会帮助我们把这面墙的裂缝抹平。

其实一个polyfill的意思就是，比如开发者想要一个格式化时间的函数，然后现有的api都没有，于是作者自创一个stringDate的方法，那么这个方法就成为一个polyfill。

扩展资料：

polyfill 是 shim 的一种。

shim 是将不同 api 封装成一种，比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象；

polyfill 特指 shim 成的 api 是遵循标准的，其典型做法是在IE浏览器中增加window.XMLHttpRequest ，内部实现使用 ActiveXObject。

在实际中为了方便做对比，会特指 shim 的 api 不是遵循标准的，而是自己设计的。

---