babel裏transform-runtime插件的做用

首先看一個例子：

源碼：

function resolveAfter2Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('reggsolved');
        }, 2000);
    });
}

async function asyncCall() {
    console.log('calling');
    var result = await resolveAfter2Seconds();
    console.log(result);
    // expected output: 'resolved'
}

asyncCall();

經過bable轉換，配置以下：

"presets": [
        [
            "env",
            {
                "exclude": [                         
                          "transform-async-to-generator",
                ]
            }
        ]
    ],

'use strict';

function resolveAfter2Seconds() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve('reggsolved');
        }, 2000);
    });
}

function asyncCall() {
    var result;
    return regeneratorRuntime.async(function asyncCall$(_context) {
        while (1) {
            switch (_context.prev = _context.next) {
                case 0:
                    console.log('calling');
                    _context.next = 3;
                    return regeneratorRuntime.awrap(resolveAfter2Seconds());

                case 3:
                    result = _context.sent;

                    console.log(result);
                    // expected output: 'resolved'

                case 5:
                case 'end':
                    return _context.stop();
            }
        }
    }, null, this);
}

asyncCall();

增長這個插件：'transform-runtime'，配置以下：

{
    "presets": [
        [
            "env",
            {
                "exclude": [                         
                          "transform-async-to-generator",
                ]
            }
        ]
    ],

    "plugins" :['transform-runtime'] 
}

轉換後的代碼就變成這樣了

'use strict';

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}

function resolveAfter2Seconds() {
    return new _promise2.default(function(resolve) {
        setTimeout(function() {
            resolve('reggsolved');
        }, 2000);
    });
}

function asyncCall() {
    var result;
    return _regenerator2.default.async(function asyncCall$(_context) {
        while (1) {
            switch (_context.prev = _context.next) {
                case 0:
                    console.log('calling');
                    _context.next = 3;
                    return _regenerator2.default.awrap(resolveAfter2Seconds());

                case 3:
                    result = _context.sent;

                    console.log(result);
                    // expected output: 'resolved'

                case 5:
                case 'end':
                    return _context.stop();
            }
        }
    }, null, this);
}

asyncCall();

增長了這一段

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}

此外替換的變量以下

Promise               =>     _promise2.default
regeneratorRuntime    =>    _regenerator2.default

至此，已經知道差異：
一些全局變量直接require進來了

咱們看看 transform-runtime的解釋：

transform-runtime 是爲了方便使用 babel-runtime 的，它會分析咱們的 ast 中，是否有引用 babel-rumtime 中的墊片（經過映射關係），若是有，就會在當前模塊頂部插入咱們須要的墊片。

transform-runtime 是利用 plugin 自動識別並替換代碼中的新特性，你不須要再引入，只須要裝好 babel-runtime 和 配好 plugin 就能夠了。好處是按需替換，檢測到你須要哪一個，就引入哪一個 polyfill，若是隻用了一部分，打包完的文件體積對比 babel-polyfill 會小不少。並且 transform-runtime 不會污染原生的對象，方法，也不會對其餘 polyfill 產生影響。因此 transform-runtime 的方式更適合開發工具包，庫，一方面是體積夠小，另外一方面是用戶（開發者）不會由於引用了咱們的工具，包而污染了全局的原生方法，產生反作用，仍是應該留給用戶本身去選擇。缺點是隨着應用的增大，相同的 polyfill 每一個模塊都要作重複的工做（檢測，替換），雖然 polyfill 只是引用，編譯效率不夠高效。