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 只是引用，编译效率不够高效。