babel-polyfill
Babel默认只转换JS语法,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码。
举例来说,ES2015在Array
对象上新增了Array.from
方法。Babel 就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill。(内部集成了core-js和regenerator)
npm install babel-polyfill --save
使用时,在所有代码运行之前增加require('babel-polyfill')
。或者更常规的操作是在webpack.config.js中将babel-polyfill
作为第一个entry。因此必须把babel-polyfill作为dependencies
而不是devDependencies。
注意: 在你的整个应用里只使用一次
require("babel-polyfill")
。多次import
或require
babel-polyfill会引起报错,因为它可能导致全局冲突和其他难以追踪的问题。 我们建议创建一个只包含require
语句的单个入口文件。
babel-polyfill的缺点
- 使用后打包后的体积很大,因为babel-polyfill是一个整体,把所有方法都加到原型链上。比如我们只使用了
Array.from
,但它把Object.defineProperty
也给加上了,这就是一种浪费了。 - babel-polyfill会污染全局变量,给很多类的原型链上都作了修改,如果我们开发的也是一个类库供其他开发者使用,这种情况就会变得非常不可控。
解决方法1:单独引入
可以通过单独使用core-js
的某个类库来解决,比如通过引入babel-runtime/core-js/promise
来获取Promise
但是这样需要我们认为判断并且手动引入类库,太麻烦了。