Babel 是一个工具链（或者说是编译器），主要用于将 ECMAScript 2015+ 代码转换为当前和旧版浏览器或环境中向后兼容的 JavaScript 版本

babel入门

以下是 Babel 可以做的主要事情：

• 转换语法
• 目标环境中缺少的 Polyfill 功能（通过第三方 polyfill，例如 core-js）
• 源代码转换 (codemods)
• 更多

babel的配置

三类配置文件

• babel.config.json，需要 v7.8.0 及更高版本
• babel.config.js，适用旧的Babel版本。优势：构建时是有条件的或以其他方式计算，会很方便。缺点：静态可分析性较差，因此对可缓存性、linting、IDE 自动补齐等有负面影响
• 严格来说，这种不叫配置文件，是在package.json的babel字段配置

两种配置范围

• babel.config.json，适用于整个项目，比如使用monorepo
• babelrc.json，适用于项目的某个单独部分

配置的结构

• presets，预设
• plugin，插件，是小型 JavaScript 程序，指导 Babel 如何对代码进行转换

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

上面有一个useBuiltIns选项，选项：

• usage，只包含所需的polyfill
• entry，包含完整的polyfill

更多完整细节，及示例见：使用指南 · Babel 中文网 (nodejs.cn)

babel模块

• babel/core，Babel 的核心功能
• babel/cli，一个允许你从终端使用 babel 的工具
• babel-polyfill，Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）。如果需要转码这些内容，就需要使用它

plugins插件

插件是小型 JavaScript 程序，指导 Babel 如何对代码进行转换。 你甚至可以编写自己的插件来将你想要的任何转换应用于你的代码。 要将 ES2015+ 语法转换为 ES5，我们可以依赖 @babel/plugin-transform-arrow-functions 等官方插件（代码中的任何箭头函数都将转换为 ES5 兼容的函数表达式）

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

编译代码时删除console.log

{
  ...
  "plugins": ["babel-plugin-transform-remove-console"]
}

使用插件时，还可以自己对插件进行一些配置

{
    "plugins": [
        ["transform-runtime", {
            "helpers": false, //自动引入helpers
            "polyfill": false, //自动引入polyfill（core-js提供的polyfill）
            "regenerator": true, //自动引入regenerator
        }]
    ]
}

preset预设

预设，它只是一组预先确定的插件。

@babel/preset-env是一个出色的预设，无需任何配置，此预设将包含所有支持现代 JavaScript（ES2015、ES2016 等）的插件。

@babel/polyfill模块包括 core-js 和自定义 再生器运行时 以模拟完整的 ES2015+ 环境。

使用预设时，一些时候还需要开发者手动进行一些配置

{
  "preset": [["@babel/preset-env"], [其它预设]]
}
{
  "preset": [["@babel/preset-env",{在这里进行配置}]]
}

下面是一个实例

{
    "presets": [
        ["env", {
            "targets": { //指定要转译到哪个环境
                //浏览器环境
                "browsers": ["last 2 versions", "safari >= 7"],
                //node环境
                "node": "6.10", //"current"  使用当前版本的node
                
            },
             //是否将ES6的模块化语法转译成其他类型
             //参数："amd" | "umd" | "systemjs" | "commonjs" | false，默认为'commonjs'
            "modules": 'commonjs',
            //是否进行debug操作，会在控制台打印出所有插件中的log，已经插件的版本
            "debug": false,
            //强制开启某些模块，默认为[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模块，默认为[]
            "exclude": ["transform-es2015-for-of"],
            //是否自动引入polyfill，开启此选项必须保证已经安装了babel-polyfill
            //参数：Boolean，默认为false.
            "useBuiltIns": false
        }]
    ]
}