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