Babel transform-runtime

Babel @babel/plugin-transform-runtime

In this section, we will learn about @babel/plugin-transform-runtime and @babel/runtime.

Babel uses auxiliary functions to implement common functions, such as the _extend() function. Each compiled file needs to define the auxiliary functions it needs to use. But this will obviously cause a lot of duplication, so Babel encapsulates all auxiliary functions in @babel/runtime, and each compiled file only needs to reference @babel/runtime.

The @babel/runtime plug-in can convert the tool function code into a require statement, which points to a reference to @babel/runtime. Whenever you want to translate an API, you must manually add require('@babel/runtime'). Simply put, @babel/runtime is more like an implementation of on-demand loading. For example, where Promise needs to be used, just add the following code to the header of this file:

require Promise from '@babel/runtime/core-js/promise'

In order to facilitate the use of @babel/runtime plug-in, to solve the distress of manual require. It will analyze whether there is a reference to @babel/runtime in our ast (through the mapping relationship), and if so, it will insert the spacer we need at the top of the current module.

Transform-runtime uses plugins to automatically identify and replace new features in the code, so there is no need to introduce them, just install @babel/runtime and configure plugin.

Installation configuration

In most cases, we should install @babel/plugin-transform-runtime as a development dependency, that is, add --save-dev to the installation command, and use @babel/runtime as a production dependency, and use it in the installation command --save.

The installation command is as follows:

> npm install --save-dev @babel/plugin-trabsform-runtime
> npm install --save @babel/runtime

After installation, we can configure it in the .babelrc configuration file. Whether @babel/plugin-transform-runtime wants to enable a certain function is set in the configuration item. The settings of some configuration items need to install the npm package . @babel/plugin-transform-runtime When no configuration is set, its configuration item parameters take default values.

The following two configurations have the same effect:

// 默认配置
{
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
}

// 设置其配置项
{ 
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,
          "corejs": false,
          "regenerator": true,
          "useESModules": false,
          "absoluteRuntime": false,
          "version": "7.0.0-beta.0"
        }
      ]
    ]
}

Configuration item explanation

• helpers: This configuration item is used to set whether to automatically introduce auxiliary function packages. The value is a Boolean value and the default is true.

Toggles whether to replace inline babel helpers (class call checking, extensions, etc.) with calls to moduleName.

• corejs: Used to set whether to do API conversion to avoid polluting the global environment. The optional values of corejs are false, 2 and 3. Under normal circumstances, the value of corejs is false, which means that APIs such as Promise are not converted. When developing the JS library, set it to 2 or 3.
• regenerator: Used with corejs to set whether to do API conversion to avoid polluting the global environment. The value of regenerator is a Boolean value, and the default is true.
• useESModules: Used to set whether to use ES6 modular usage, the value is Boolean, and the default is fasle. When using packaging tools such as webpack, we can set it to true for static analysis.
• absoluteRuntime: Use custom @babel/plugin-transform-runtime to introduce the path rule of @babel/runtime/ module, the value is a Boolean value or a string. There is no special requirement, we don't need to modify, the default is false.
• version: This item is mainly related to the version number of @babel/runtime and its evolutionary versions @babel/runtime-corejs2, @babel/runtime-corejs3, and we only need to install one of these three packages as needed. We just set the version number of the installed npm package to version.

advantage

• Will not pollute global variables.
• Multiple use will only be packaged once.
• Rely on unified and on-demand introduction, without duplication and redundant introduction.

shortcoming

• The method of instantiation is not supported, for example, Array.includes(x) cannot be converted
• If the API used is not used a lot, then the polyfill package introduced by transform-runtime will be larger than when it is not transform-runtime
• As the application grows, each module of the same polyfill has to do repeated work (detection, replacement), although the polyfill is just a reference, and the compilation efficiency is not efficient enough.