美文网首页
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