The text "@babel/plugin-transform-runtime" does not require translation as it is already in English.

@babel/plugin-transform-runtime

During the process of secondary development of a certain project kernel, I encountered a strange problem. The front-end project uses Taro sub-packages. WeChat Mini Program specifies that the size of each package should not exceed 2MB. After self-compilation, there is a dependency resource file of 1.7MB in the main package, and some other dependencies are added, which leads to the main package of the Mini Program being too large. This problem has troubled me for a long time. I originally thought it was a system problem and installed a Hackintosh, but it still couldn't be solved. With the help of the old brother in the group, the problem was finally solved. The solution turned out to be upgrading babel. After testing, it is mainly because of @babel/plugin-transform-runtime.

@babel/plugin-transform-runtime has three main functions, one of which is to automatically remove the inlined helper functions after syntax transformation, and use the helper functions in @babel/runtime/helpers instead. This solves the problem of code reuse and large final file size.

Installation and Configuration#

Install @babel/plugin-transform-runtime as a development dependency and @babel/runtime as a production dependency.

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

Configuration File#

// Default configuration
{
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
}

// Set its configuration options
{ 
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "helpers": true,
          "corejs": false,
          "regenerator": true,
          "useESModules": false,
          "absoluteRuntime": false,
          "version": "7.0.1-beta.0"
        }
      ]
    ]
}

helpers: This configuration option is used to determine whether to automatically import the helper function package. The default value is true.
corejs: Used to determine whether to perform API transformation to avoid polluting the global environment. corejs can be set to false, 2, or 3. In general, corejs is set to false, which means that API transformations for Promise-like objects are not performed. However, when developing JS libraries, it can be set to 2 or 3.
regenerator: Used together with corejs to determine whether to perform API transformation to avoid polluting the global environment. The default value is true.
useESModules: Used to determine whether to use ES6 module usage. The default value is false. When using bundling tools like webpack, it can be set to true for static analysis.
absoluteRuntime: Used to customize the path rules for @babel/plugin-transform-runtime to import the @babel/runtime module. It can be a boolean value or a string. Unless there are special requirements, we do not need to modify it, and the default value is false.
version: This option is mainly related to the version number of @babel/runtime and its evolved versions @babel/runtime-corejs2 and @babel/runtime-corejs3. We only need to install one of these three packages according to our needs. We can set the version number of the installed npm package to version.

Translation: