transfrom-runtime文档

transfrom-runtime文档

babel只会默认对句法进行转换，而那些方法，api不会转换，要转就要使用polyfill和transform，这里介绍transform，关于polyfill请看我的polyfill文章

1. 简介

-用来抽取helpers和builtins，自动导入到你的代码中，没有全局污染
-注意：实例的方法比如 "foobar".includes("foo")不会生效，因为这会修改现有的built-ins（解决这种情况，请使用babel-polyfill）

1. 为什么要使用Runtime transform

babel使用一些小的helpers如_extend来处理传统的函数，(也就是说function fn(){}这样的函数经过babel也会转码，而且转
出一大坨子代码)，这个helpers会被添加到每一个需要它的文件，这种重复有时是不必要的，特别是在你的应用分布于多个文件里
面，这就是为什么需要transform-runtime插件了，因为使用这个插件，所有的helpers都会被提取到babel-runtime模块中从而
避免重复的代码出现在编译后的文件里面，这个被提取的runtime将会编译到你的项目中
这个插件的另外一个作用就是能够为你的代码创建一个沙箱环境，如果你使用babel-polyfill当处理这些全局函数如Promise,
Set和Map，编译后的结果会污染整个全局环境，会生成很多built-ins，这种情况在你自己写代码可能影响不大，但是当你把代码
给别人使用或者你不确定你的代码的运行环境时，这时就出现问题了，那么这个插件就会对这些built-ins起个别名放在core-js
里面，所以可以使用这些全局的方法不需要导入polyfill

1. 安装

开发版本 npm install --save-dev babel-plugin-transform-runtime
生成版本 npm install --save babel-runtime

1. 使用

配置文件中
{
    "plugins": [
        ["transform-runtime",{
            "helpers": false,
            "polyfill": false,
            "regenerator": true,
            "moduleName": "babel-runtime"
        }]
    ]
}
上边传递的options中的参数默认都是true，不需要设置，因为这些都是这个插件的特点

1. 结语

怕你们还是不懂，多说两句，你可以什么都不用管，在项目中直接使用
{
    "plugins": [
        "transform-runtime"
    ]
}
但是你要清楚，这个插件有缺点有优点
优点是
    1.解决babel处理函数时生成的多余代码，这个插件把这些代码提取到它自己的helper模块中
    2.解决全局函数的全局污染，因为全局函数需要单独生成实现函数本身功能的特定代码，要把这部分代码提取到插件的core-js模块中
缺点是
    1.无法解决实例的方法，实例的方法需要借助polyfill