什么是 Babel？
Babel 是一个 JavaScript 编译器，它可以将 ES6+、TypeScript 和 React-Native 等语言编译成浏览器或 Node.js 可以理解的 JavaScript 代码。
Babel 的主要作用是让开发者可以使用最新的 JavaScript 语言特性，而无需担心浏览器或 Node.js 对这些特性的支持程度。
安装和配置 Babel
安装 Babel 非常简单，只需要在项目根目录下执行以下命令即可：
npm install --save-dev @babel/core @babel/cli
安装完成后，需要在项目根目录下创建一个 .babelrc 文件，并配置 Babel 的插件和预设。以下是一个简单的配置示例：
-- -------------------- ---- -------
-
---------- -
--------------------
----------------------
--------------------------
--
---------- -
------------------------------------------
--------------------------------------------
---------------------------------
-
-这个配置文件中，presets 表示 Babel 的预设，plugins 表示 Babel 的插件。其中，@babel/preset-env 可以将 ES6+ 语法编译成 ES5 语法，@babel/preset-react 可以将 JSX 编译成 JavaScript，@babel/preset-typescript 可以将 TypeScript 编译成 JavaScript。
使用 Babel
使用 Babel 非常简单，只需要在命令行中执行以下命令即可：
npx babel src --out-dir dist
这个命令会将 src 目录下的所有文件编译成 JavaScript，并输出到 dist 目录下。
Babel 的高级用法
配置 Babel 的 targets
Babel 的 targets 选项可以指定编译后的 JavaScript 代码要支持的浏览器或 Node.js 版本。以下是一个示例配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- -
----- - ----------
--- -- ---
--
------- ---------
-
-
-
-
-这个配置表示编译后的 JavaScript 代码要支持最近两个版本的浏览器和 IE 11 及以上版本，以及当前版本的 Node.js。
使用 Babel 的 polyfill
Babel 的 polyfill 可以让开发者在编写 JavaScript 代码时使用最新的语言特性，而无需担心浏览器或 Node.js 对这些特性的支持程度。以下是一个示例配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-这个配置表示使用 Babel 的 polyfill，且只会将代码中用到的特性添加到编译后的 JavaScript 代码中。同时，这个配置还指定了使用 core-js 3 作为 polyfill 库。
使用 Babel 的插件和预设
Babel 的插件和预设可以让开发者在编写 JavaScript 代码时使用更多的语言特性。以下是一些常用的插件和预设：
@babel/plugin-proposal-class-properties：可以让开发者在 JavaScript 中使用类属性语法。@babel/plugin-proposal-object-rest-spread：可以让开发者在 JavaScript 中使用对象扩展语法。@babel/plugin-transform-runtime：可以让开发者在 JavaScript 中使用async/await等语法。@babel/preset-react：可以让开发者在 JavaScript 中使用 JSX 语法。@babel/preset-typescript：可以让开发者在 JavaScript 中使用 TypeScript 语法。
使用 Babel 编译 React-Native 代码
Babel 也可以用来编译 React-Native 代码。以下是一个示例配置：
{
"presets": [
"@babel/preset-react-native"
]
}这个配置表示使用 Babel 的预设 @babel/preset-react-native 来编译 React-Native 代码。
总结
Babel 是一个非常强大的 JavaScript 编译器，它可以让开发者使用最新的 JavaScript 语言特性，而无需担心浏览器或 Node.js 对这些特性的支持程度。本文介绍了 Babel 的安装和配置、使用方法以及高级用法，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e683871886fbafa41ba7fa