babel中的polyfill和runtime

最新推荐文章于 2025-01-03 11:38:22 发布

原创最新推荐文章于 2025-01-03 11:38:22 发布 · 729 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #javascript

本文介绍了Babel在转换ES6语法时如何使用preset和plugin，详细阐述了@babel/polyfill和@babel/plugin-transform-runtime的区别。@babel/polyfill全局修改原型链，可能导致冲突，而@babel/plugin-transform-runtime通过模块引入避免污染全局。讨论了两者的优缺点，并提供了配置示例，帮助开发者做出最佳选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

preset的由来

如果转换某个文件下箭头函数，需要安装插件@babel/plugin-transform-arrow-functions
于是可以执行

babel src -d dist --plugins=@babel/plugin-transform-arrow-functions

将src下的文件，拷贝到dist目录，并且使用插件，将箭头函数转换, 也可以只针对单个文件编辑

如果你对文件加入其它转换则需要在添加一个新的插件，于是使用一个配置文件更为方便些，于是出现了preset

故使用配置文件babel.config.json设置预先设置好的插件
target 设置需要兼容的目标浏览器

@babel/polyfill的由来 => API转换

01: babel转码又分为两部分，一个是语法转换，一个是API转换。

API的转换:

I: 例如Promise，Set，Map还有静态方法Object.assign

II: 实例方法例如Array.prototype.includes。对于实例方法 core-js@2是转换不了的，只有core-js@3才会转换

02: @babel/polyfill用法

在preset中设置 "useBuiltIns"

"usage" 按需引入,不许手动引入额外东西，打包出的数据按需引入模块

"entry" 需要手动引入 import "core-js/stable"; 和 import "regenerator-runtime/runtime"; 打包出来文件包含所有垫片

fasle 默认打包不引入垫片和东西

需要设置corejs的版本

"corejs": {

"version": 3,

}

缺点

01: 执行机制

I: Array.from 等静态方法，直接在 global.Array 上添加

II: includes 等实例方法，直接在 global.Array.prototype 上添加,修改了全局变量的原型，会有意想不到冲突（尤其使用第三方库，因为第三方库基本都是修改全局变量）

@babel/plugin-transform-runtime + @babel/runtime-corejs3由来 => API转换

runtime 特点

移除内联的 Babel helper函数, 并使用模块 babel-runtime/helpers 代替，抽离公共的 helper function , 以节省代码的冗余

没有使用前

function _classCallCheck，

function _createClass 。。。。helper函数，这样的话每个文件可能包含重复的helper函数

使用后

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));

抽离整个项目，采用@babel/runtime-corejs3/helpers包中引入，减少了文件体积

runtime 缺点

动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件,实现polyfill的功能且无全局污染 (“foobar”.includes(“foo”) 实例方法无法使用)

对比 polyfill vs runtime

01: 两者只做API的转换，不做语法的转换，语法转换需要preset，两者最好不要同时使用

02: @babel/preset-env 走 useBuiltIns: usage 搭配 browserlist 的这种 polyfill 的方式的话,一定程度上减少不需要被加入到编译打包流程的 polyfill 的数量

03: 如果@babel/plugin-transform-runtime配置了corejs:3, 则preset-env的useBuiltIns就不会生效,需要配置

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie": "9",
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3,
          "proposals": true
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

04: polyfill使用 modules 这个文件夹,modules 以污染全局变量的方法来实现 api

05: runtime-corejs使用 library 这个文件夹, library 使用 helper 的方式，局部实现某个 api，不会污染全局变量