Babel常见配置及插件

Babel常见配置及插件

常用配置

@babel/preset-typescript

ts预设插件，使用ts必装

// 配置
{
   
  "presets": [
    "@babel/preset-typescript"
  ]
}

@babel/preset-env

js预设插件，可以使用高版本js语法而不需要单独转换，根据babel和corejs polyfill语法映射进行转换

// 配置
{
   
  "presets": [
    [
      "@babel/preset-env",
      {
   
        "targets": {
   
          "browsers": ['last 2 versions', 'IE 10'], // browser使用
          "node": 6, // node环境使用
          "modules": "auto", // 转换js语法为目标版本，如cjs、umd、esm（如果esm格式则需要设置为false），auto情况下根据调用方设置（如babel-loader，@rollup/plugin-babel等）
        }
        // entry--自动将导入的模块根据设置的浏览器版本替换成补丁集
        // usage--按需导入，但实际问题更多，比如script标签引入的第三方脚本无法转换
        "useBuiltIns": "entry", // 定义babel如何处理polyfill，@babel/polyfill已弃用下，还需要安装core-js模块， usage 或 entry 时，也是直接使用core-js模块进行导入
        "corejs": {
    // useBuiltIns是usage或entry时有用，
          "version": "2.8", // 
          "proposals": true,
        }
      }
    ]
  ]
}

@babel/preset-react

react预设插件，包括对jsx预发解析等

// 配置
{
   
  "presets