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