babel 配置

时间:2021-11-25
本文章向大家介绍babel 配置,主要包括babel 配置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

@babel/preset-env

通过配置 useBuiltIns 参数有三种实现方式

1. "entry"

需要在入口文件添加import "core-js",打包后会根据 browserslist 将import "core-js"替换为浏览器不兼容的所有 polyfill。

[
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

2. "useage"

参照目标浏览器和代码中所使用到的特性按需引入 polyfill,需要填写另一个参数 corejs

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

Babel 编译通常会排除 node_modules,所以 "useBuiltIns": "usage" 存在风险,可能无法为依赖包添加必要的 polyfill。

3. "false"(默认值)

此时不对 polyfill 做操作。如果引入 @babel/polyfill,则无视配置的浏览器兼容,引入所有的 polyfill。

[
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns":false
      }
    ]
  ]
}

@babel/runtime + @babel/plugin-transform-runtime

@babel/runtime 把所有语法转换会用到的辅助函数都集成在了一起。
@babel/plugin-transform-runtime 有三大作用,其中之一就是自动移除语法转换后内联的辅助函数(inline Babel helpers),使用 @babel/runtime/helpers 里的辅助函数来替代。

{
  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

指定执行环境 Browserslist, Browserslist 的配置有几种方式,并按下面的优先级使用:

  1. @babel/preset-env 里的 targets
  2. package.json 里的 browserslist 字段
  3. browserslistrc 配置文件

原文地址:https://www.cnblogs.com/flying-script/p/15603985.html