简单总结:
babel-loader
:结合webpack使用,必选。
@babel/core
:babel核心包,必选。
@babel/preset-env
:转换ES6语法到ES5,必选,只转换ES6语法(如let, const, 箭头函数等)。
@babel/plugin-transform-runtime
:ES6 API的部分实现,按需引入,不会污染全局JS对象,副作用较小。但对于一些对象实例的方法没有实现,如[1,2,3].includes(2). 可选。
@babel/polyfill
:ES6 API的全部实现,全局修改JS对象,需配合core-js
使用,可选。
如何选择@babel/plugin-transform-runtime
与@babel/polyfill
?
原因:约定俗成,第三方库提供保证运行的代码,且不应该污染全局环境。由App做统一的polyfill,避免多次引入polyfill的全局代码造成资源浪费。
第三方库
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime
// .babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-transform-runtime"
]
]
}
App
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save @babel/polyfill core-js@3
// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
}
网友评论