tranform-runtime配置文件
# tranform-runtime配置文件
babel只会默认对句法进行转换,而那些方法,api不会转换,要转就要使用polyfill和transform,这里介绍transform,关于polyfill请看我的polyfill文章
-用来抽取helpers和builtins,自动导入到你的代码中,没有全局污染 -注意:实例的方法比如 "foobar".includes("foo")不会生效,因为这会修改现有的built-ins(解决这种情况,请使用babel-polyfill)
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
// 2. 使用
// 配置文件中
{
"plugins": [
["transform-runtime",{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
}
// 上边传递的options中的参数默认都是true,不需要设置,因为这些都是这个插件的特点
// 简单方式在项目中直接使用即可
{
"plugins": [
"transform-runtime"
]
}
/*
优点是:
1.解决babel处理函数时生成的多余代码,这个插件把这些代码提取到它自己的helper模块中
2.解决全局函数的全局污染,因为全局函数需要单独生成实现函数本身功能的特定代码,要把这部分代码提取到插件的core-js模块中
缺点是:
1.无法解决实例的方法,实例的方法需要借助polyfill
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
编辑 (opens new window)