Babel插件：@babel/plugin-transform-runtime

 

一 概述

每個Babel編譯后的腳本文件，都以導入的方式使用Babel的幫助函數，而不是每個文件都復制一份幫助函數的代碼。

1 優點

（1）提高代碼重用性，縮小編譯后的代碼體積。

（2）防止污染全局作用域。（啟用corejs配置）

babel-polyfill會將Promise等添加成全局變量，污染全局空間。

 

① 默認使用@babel/runtime，corejs配置為2時，改為使用@babel/runtime-corejs2。

② 幾個包的包含關系。

   babel-polyfill僅僅是引用core-js、regenerator-runtime這兩個npm包。

   @babel/runtime包含兩個文件夾：helpers（定義了一些處理新的語法關鍵字的幫助函數）、regenerator（僅僅是引用regenerator-runtime這個npm包）。

   @babel/runtime-corejs2包含三個文件夾：core-js（引用core-js這個npm包）、helpers（定義了一些處理新的語法關鍵字的幫助函數）、regenerator（僅僅是引用regenerator-runtime這個npm包）。

   可以看出，@babel/runtime-corejs2≈@babel/runtime + babel-polyfill：

   @babel/runtime只能處理語法關鍵字，而@babel/runtime-corejs2還能處理新的全局變量（例如，Promise）、新的原生方法（例如，String.padStart ）；

   使用了@babel/runtime-corejs2，就無需再使用@babel/runtime了。

   

 

二 項目結構

 

 

三 搭建環境

 

# 安裝gulp
yarn add --dev gulp
# 安裝Babel 7
yarn add --dev gulp-babel@next
yarn add --dev gulp-babel@next @babel/core
# 安裝preset
yarn add --dev @babel/preset-env
# 安裝pugin
yarn add --dev @babel/plugin-transform-runtime

 

四 創建配置文件

 

（1）gulpfile.js

　

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

 

（2）.babelrc

 

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

 

五 創建腳本文件

 

（1）apple.js

　　

class Apple{
    constructor(){
        this.name = Symbol('apple');
        this.attrs = new Map();
    }
    
    hello(){
        console.log('hello');
    }
}

 

（2）orange.js

 

class Apple{
    constructor(){
        this.name = Symbol('orange');
        this.attrs = new Map();
    }
    
    hello(){
        console.log('hello');
    }
}

 

六 編譯后文件

 

（1）apple.js

 

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _map = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/map"));

var _symbol = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));

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

var Apple =
/*#__PURE__*/
function () {
  function Apple() {
    (0, _classCallCheck2.default)(this, Apple);
    this.name = (0, _symbol.default)('apple');
    this.attrs = new _map.default();
  }

  (0, _createClass2.default)(Apple, [{
    key: "hello",
    value: function hello() {
      console.log('hello');
    }
  }]);
  return Apple;
}();

 

（2）orange.js

 

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _map = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/map")); 

var _symbol = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));

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

var Apple =
/*#__PURE__*/
function () {
  function Apple() {
    (0, _classCallCheck2.default)(this, Apple);
    this.name = (0, _symbol.default)('orange');
    this.attrs = new _map.default();
  }

  (0, _createClass2.default)(Apple, [{
    key: "hello",
    value: function hello() {
      console.log('hello');
    }
  }]);
  return Apple;
}();