随着 JavaScript 语言的不断发展，ES6 成为了现代 JavaScript 开发的重要标准。然而，由于 ES6 的新特性在不同浏览器中的支持程度不同，为了保证代码能够在各种环境下正常运行，我们需要使用 Babel 来将 ES6 代码转换为 ES5 代码。本文将介绍 Babel 编译 ES6 代码所需的默认配置项。
Babel 是什么？
Babel 是一个 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码，以便在不支持 ES6 的浏览器中运行。Babel 还支持其他语言的编译，如 TypeScript、Flow 等。
Babel 的默认配置项
在使用 Babel 编译 ES6 代码时，我们需要配置一些参数，以便 Babel 能够正确地将 ES6 代码转换为 ES5 代码。下面是 Babel 的默认配置项：
// javascriptcn.com 代码示例
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": "> 0.25%, not dead"
}
]
],
"plugins": []
}presets
presets 是 Babel 的预设，它包含了一组插件和配置，用于编译特定的 JavaScript 版本。在默认配置项中，我们使用了 @babel/preset-env 这个预设，它会根据配置的浏览器版本和特性，自动选择需要的插件和配置，以便将 ES6 代码转换为 ES5 代码。
useBuiltIns
useBuiltIns 是 @babel/preset-env 的一个参数，它指定了 Babel 是否应该在编译时自动添加 polyfill。polyfill 是一段代码，用于在不支持某些新特性的浏览器中模拟这些特性。在默认配置项中，我们使用了 usage，这意味着 Babel 会根据代码中使用的特性自动添加相应的 polyfill。
corejs
corejs 是 useBuiltIns 参数的一个子参数，它指定了使用哪个版本的 core-js 库来提供 polyfill。core-js 是一个 JavaScript 库，它提供了一些 ES6 和 ES7 的新特性的 polyfill。在默认配置项中，我们使用了 core-js 3。
targets
targets 是 @babel/preset-env 的一个参数，它指定了需要支持的浏览器版本。在默认配置项中，我们使用了 > 0.25%, not dead，这意味着我们需要支持全球使用情况占比大于 0.25% 的浏览器，并且不包括已经停止更新的浏览器。
plugins
plugins 是 Babel 的插件，它们用于提供更高级的编译功能。在默认配置项中，我们没有使用任何插件。
示例代码
下面是一个使用了 ES6 的箭头函数的示例代码：
const arr = [1, 2, 3]; const square = arr.map(x => x * x); console.log(square);
使用 Babel 编译后的代码如下：
"use strict";
var arr = [1, 2, 3];
var square = arr.map(function (x) {
return x * x;
});
console.log(square);可以看到，箭头函数被转换为了普通函数，以便在不支持箭头函数的浏览器中运行。
总结
Babel 是一个强大的 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码，以便在不支持 ES6 的浏览器中运行。在使用 Babel 编译 ES6 代码时，我们需要配置一些参数，以便 Babel 能够正确地将 ES6 代码转换为 ES5 代码。默认配置项中，我们使用了 @babel/preset-env 这个预设，并指定了一些参数，如 useBuiltIns、corejs 和 targets。在编写 ES6 代码时，我们可以放心地使用新特性，因为 Babel 能够帮助我们将其转换为 ES5 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656001c3d2f5e1655da2e176