Babel 是一个广受欢迎的 JavaScript 编译工具，它可以将最新的 ES6+ 特性转换为向后兼容的 JavaScript，以便在更早版本的浏览器中运行。本文将探讨 Babel 的一些基础应用，包括配置文件、插件和预设，并提供详细的示例代码。
配置文件
Babel 的配置文件是一个 babel.config.js 或者 .babelrc 文件，用来告诉 Babel 怎样转换代码。如果使用的是 babel.config.js 文件，代码如下：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------
--
-------- -
----------------------------------
------------------------------------------
--
--如果使用的是 .babelrc 文件，代码如下：
-- -------------------- ---- -------
-
---------- -
-------------------
--
---------- -
----------------------------------
-----------------------------------------
-
-其中 presets 是 Babel 转换代码的规则集合，plugins 是 Babel 转换代码的插件集合。常用的预设有 @babel/preset-env、@babel/preset-react。
插件
Babel 插件是 Babel 转换代码的一种方式，可以被添加到配置文件的 plugins 中。常用的插件有 @babel/plugin-transform-runtime、@babel/plugin-proposal-class-properties。
@babel/plugin-transform-runtime
@babel/plugin-transform-runtime 插件用于实现一些新特性的环境依赖，例如用 class 关键字定义类这个新特性，执行时需要依赖实例。若项目本身不支持新特性则无法执行，但是通过此插件可让其运行。她一般与 @babel/runtime 包搭配使用。
import { class } from '@babel/plugin-transform-runtime';
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}@babel/plugin-proposal-class-properties
@babel/plugin-proposal-class-properties 插件用于解析类的属性和方法。例如，当我们在类中使用箭头函数作为方法，不使用此插件的话，我们将会遇到以下错误：
使用此插件后，我们便可以愉快的在类中使用箭头函数了。
class Person {
name = 'Tom';
sayHi = () => {
console.log(`My name is ${this.name}.`);
};
}预设
Babel 预设是一组插件集合，它们共同解析代码中的 JavaScript 语法。其中 @babel/preset-env 预设包含了所有以 ECMAScript 为基础的特性（始于 ECMAScript 2015），我们可以通过这个预设轻松地实现 ES6+ 的向下兼容。
-- -------------------- ---- -------
-------------- - -
-------- -
-
--------------------
-
-------- -
------- -----
--- -----
--
--
--
--
--在该配置文件中，我们使用 @babel/preset-env 预设，并设置了目标浏览器为 Chrome 58 以及 IE 11。
结论
Babel 是一个强大、可扩展的工具，通过配置文件、插件和预设，我们可以轻松地实现多种特性的向下兼容，提高代码的可维护性和可读性。希望本文能为你在前端开发中有效地运用 Babel 提供帮助。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709e950d91dce0dc87cf4b2