什么是 Babel？
Babel 是一个 JavaScript 编译器，它可以将现代 JavaScript 代码转换为向后兼容的代码，以便在旧版浏览器和其他环境中运行。Babel 支持很多 JavaScript 的新特性和语法糖，比如箭头函数、类、模板字面量等等。
Babel 的优点
- 使得开发者可以使用最新的 JavaScript 特性进行开发
- 保证代码在旧版浏览器和环境中正常运行
- 降低了代码的维护成本，因为开发者只需要在代码中写最新的 JavaScript 特性即可，Babel 会自动将其转换为兼容的代码
使用 Babel 编译 JavaScript 文件
下面我们来介绍如何在浏览器中使用 Babel 编译 JavaScript 文件。首先需要引入 Babel 的编译脚本文件：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Babel 编译器</title>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.12.7/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
const a = () => console.log("Hello world!");
a();
</script>
</body>
</html>在上面的代码中，我们引入了 @babel/standalone 包，并通过 script 标签的 src 属性引入了 Babel 的编译脚本文件。然后我们在 script 标签中定义了一段箭头函数的代码，并将其类型设置为 text/babel。这样浏览器就知道这段代码需要通过 Babel 进行编译。
运行这段代码，你会发现控制台输出了 Hello world!。这是因为 Babel 将箭头函数转换成了兼容的代码。具体来说，Babel 将箭头函数转换成了普通函数：
"use strict";
var a = function a() {
return console.log("Hello world!");
};
a();配置 Babel
上述示例是最简单的情况，如果你需要编译更复杂的 JavaScript 代码，你需要配置 Babel。Babel 的配置文件名为 .babelrc，必须放在项目的根目录下。下面我们来简单介绍一下如何配置 Babel。
安装 Babel
首先需要安装 @babel/core 和 @babel/preset-env 两个包：
npm install --save-dev @babel/core @babel/preset-env
配置 .babelrc
在项目根目录下创建 .babelrc 文件，写入下面的配置：
{
"presets": ["@babel/preset-env"]
}这样 Babel 就会应用 @babel/preset-env 这个预设来编译 JavaScript 代码。@babel/preset-env 会根据配置的 targets 选项来确定需要转换哪些 JavaScript 特性，以兼容目标环境。
比如我们可以将 .babelrc 配置成：
// javascriptcn.com 代码示例
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": "11"
}
}
]
]
}这表示 Babel 会将代码编译成能在 IE11 中运行的 JavaScript 代码。
使用 Babel
配置好 .babelrc 后，就可以在 JavaScript 代码中使用新特性了。下面是一个使用了新语法的示例代码：
const a = () => {
const b = 1;
return b;
};
console.log(a());使用 Babel 编译后的代码如下：
"use strict";
var a = function a() {
var b = 1;
return b;
};
console.log(a());总结
使用 Babel 编译 JavaScript 文件可以让开发者使用最新的 JavaScript 特性进行开发，同时保证代码在旧版浏览器和环境中正常运行。本文介绍了如何在浏览器中使用 Babel 编译 JavaScript 文件，以及如何配置 Babel。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654723317d4982a6eb181b9a