按需加载babel-polyfill

最新推荐文章于 2024-06-29 12:45:00 发布

「已注销」

最新推荐文章于 2024-06-29 12:45:00 发布

阅读量9.2k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/duola8789/article/details/82984922

版权

本文介绍了babel-polyfill在转换ES新特性时的局限性和潜在问题，包括增加包体积和全局污染。提出了三种解决方案：单独引入所需库、使用babel-runtime和babel-plugin-transform-runtime以避免全局污染，以及利用babel-preset-env按需加载polyfill。通过配置babel-preset-env的useBuiltIns选项，可以实现根据代码中实际使用的语言特性导入polyfill，从而减少打包大小。

摘要由CSDN通过智能技术生成

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或requirebabel-polyfill会引起报错，因为它可能导致全局冲突和其他难以追踪的问题。我们建议创建一个只包含require语句的单个入口文件。

babel-polyfill的缺点

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