美文网首页
8月24分享-babel中使用polyfill的4种方式

8月24分享-babel中使用polyfill的4种方式

作者: 原来哥哥是万家灯火 | 来源:发表于2020-08-23 23:17 被阅读0次
    • S babel中启用polyfill的方式
      官网上说的有点绕,其实总结一下可以很简单
      方法1:
      直接在入口文件中import:


      原始代码
    编译结果

    方法2:
    与方法1类似,在打包工具的入口配置中指定polyfill,如使用webpack:


    webpacl.config.js

    1、2都比较粗暴,会把整个polyfill都引进项目。

    方法3:
    使用@babel/plugin-transform-runtime + @babel/runtime
    @babel/runtime,负责提供polyfill。比如_classCallCheck函数,用来保证类不能直接当做一个普通函数调用
    @babel/plugin-transform-runtime,负责在编译结果中,从@babel/runtime中引用这些polyfill

    // babel.config.json
    {
      "plugins": [ "@babel/plugin-transform-runtime" ]
    }
    
    编译结果

    方法4:@babel/preset-env
    通过@babel/preset-env的配置项 useBuiltIns,其默认值是false

    // babel.config.json
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "usage"
          }
        ]
      ]
    }
    

    相关文章

      网友评论

          本文标题:8月24分享-babel中使用polyfill的4种方式

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