美文网首页
ES6编译为ES5 —— Babel

ES6编译为ES5 —— Babel

作者: VaryZheng | 来源:发表于2020-03-03 17:32 被阅读0次

简单总结:

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

\color{#ea4335}{做第三方库使用@babel/plugin-transform-runtime,做App用@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"
      }
    ]
  ]
}



相关文章

网友评论

      本文标题:ES6编译为ES5 —— Babel

      本文链接:https://www.haomeiwen.com/subject/yuihlhtx.html