Vue2.0 兼容 IE9 和一些低版本的浏览器，安装和使用babel-polyfill，以及兼容的优缺点

babel 默认只转换 js 语法，而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。

注意：项目中如果兼容 IE9 和一些低版本的浏览器，就必须对这些新的 API进行转码。

安装和使用babel-polyfill

方法一：

1、npm i babel-polyfill -S 或者 npm install babel-polyfill --save

2、在公共的地方 main.js 中调用

import 'babel-polyfill'

方法二：

配置 webpack.base.conf.js ，替换成 app: ['babel-polyfill','./src/main.js']

`babel-polyfill` 主要有两个缺点：

使用 babel-polyfill 会导致打出来的包非常大，因为 babel-polyfill 是一个整体，把所有方法都加到原型链上。比如我们只使用了 Array.from，但它把 Object.defineProperty 也给加上了，这就是一种浪费了。这个问题可以通过单独使用 core-js 的某个类库来解决，core-js 都是分开的。
babel-polyfill 会污染全局变量，给很多类的原型链上都作了修改，如果我们开发的也是一个类库供其他开发者使用，这种情况就会变得非常不可控。

解决办法：

在实际使用中，如果我们无法忍受这两个缺点(尤其是第二个)，通常我们会倾向于使用 babel-plugin-transform-runtime。

但如果代码中包含高版本 js 中类型的实例方法，这还是要使用 polyfill。

参考文章：一口(很长的)气了解 babel

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/lgysjfs/article/details/86614851
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-27 21:25:28
阅读 ( 1088 )
分类：前端