Vue2.0 兼容 IE9 和一些低版本的浏览器,安装和使用babel-polyfill,以及兼容的优缺点
babel 默认只转换 js 语法,而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。注意:项目中如果兼容 IE9 和一些低版本的浏览器,就必须对这些新的 API进行转码。安装和使用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
更多推荐
所有评论(0)