@babel/runtime 和 @babel/plugin-transform-runtime

1,066 阅读1分钟

@babel/runtime

一个包含 Babel 模块化 runtime helpersregenerator-runtime的库。简而言之,它是一个以模块化的方式包含JavaScript函数实现的包。目前有三个版本:@babel/runtimebabel/runtime-corejs2@babel/runtime-corejs3,分别适合于@babel/plugin-transform-runtimecore-js的设置。

corejs optionInstall command
falsenpm install --save @babel/runtime
2npm install --save @babel/runtime-corejs2
3npm install --save @babel/runtime-corejs3

功能举例如下:

// 联合使用 @babel/runtime 和 @babel/plugin-transform-runtime 的效果

var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");

var Circle = function Circle() {

  _classCallCheck(this, Circle);

};

@babel/plugin-transform-runtime

一个插件,允许重用babel注入的helper代码,防止helper代码被频繁引入到其他依赖的文件中。此外提供代码沙箱环境,防止core-js@babel/polyfill以及他们提供的内置函数来污染全局范围,特别是在共享库中。 主要参数配置如下:

  • corejs:使用哪个版本的core-js。core-js v2 仅支持全局变量(如promise)和静态属性(Array.from),而 core-js v3新增支持实例属性([].includes()),使用对应版本的core-js需要安装对应的runtime helpers
  • helpers:切换内联的 Babel 助手(classCallCheck、 extends 等)是否替换为调用 moduleName。
  • regenerator:切换是否将生成器函数转换为使用不会污染全局范围的再生器运行时。
  • absoluteRuntime:允许用户先解析一次运行时,然后在输出代码中插入运行时的绝对路径。
  • version:@babel/plugin-transform-runtime的包版本。
// 插件默认配置

{

  "plugins": [

    [

      "@babel/plugin-transform-runtime",

      {

        "absoluteRuntime": false,

        "corejs": false,

        "helpers": true,

        "regenerator": true,

        "version": "7.0.0-beta.0"

      }

    ]

  ]

}