Babel 是一个 JavaScript 编译器，可以将最新的 ECMAScript 语法转换为浏览器或 Node.js 环境中兼容的代码。在前端开发中，Babel 是必不可少的工具之一。本文将介绍 Babel 的常用配置以及 babel-preset-env 这个强大的 preset。
常用配置
@babel/core 和 @babel/cli
要使用 Babel，首先需要安装 @babel/core 和 @babel/cli：
npm install --save-dev @babel/core @babel/cli
@babel/core 是 Babel 的核心模块，包括了转换规则和插件等功能，而 @babel/cli 则提供了命令行接口，使我们能够方便地在命令行中使用 Babel。
.babelrc
.babelrc 文件是 Babel 的配置文件，可以指定转换规则、插件、preset 等。下面是一个简单的 .babelrc 配置：
{
"presets": [
"@babel/preset-env"
]
}这个配置表示使用 @babel/preset-env 这个 preset，将最新的 ECMAScript 语法转换成浏览器或 Node.js 中兼容的代码。
babel-loader
如果你使用 webpack 进行前端开发，那么你需要使用 babel-loader 来处理 JS 文件。babel-loader 可以将 .js 文件转换为浏览器或 Node.js 中兼容的代码。下面是一个简单的 webpack 配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
-babel.config.js
如果你不想使用 .babelrc，可以使用 babel.config.js 文件来指定 Babel 的配置。这个文件需要导出一个对象，其中包括了转换规则、插件、preset 等。下面是一个简单的 babel.config.js 配置：
module.exports = {
presets: [
'@babel/preset-env'
]
};babel-preset-env
babel-preset-env 是一个强大的 preset，它可以根据目标环境自动确定需要转换哪些语法和特性。例如，如果你希望在现代浏览器中运行代码，那么 babel-preset-env 将只转换必要的语法和特性，而不会添加额外的代码。下面是一个示例配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
-
-
-
-
-这个配置表示将代码转换成兼容 Chrome 58 和 IE 11 的代码。targets 可以是一个对象，也可以是一个字符串。如果是一个对象，可以设置浏览器和 Node.js 的版本号；如果是一个字符串，则表示目标环境。例如，targets: "defaults" 表示转换为所有最新的浏览器和 Node.js 版本兼容的代码。
总结
Babel 是前端开发中必不可少的工具之一。常用的配置包括 .babelrc、babel-loader 和 babel.config.js 等。babel-preset-env 可以根据目标环境自动确定需要转换哪些语法和特性，非常方便实用。除此之外，Babel 还有很多插件和 preset，可以帮助我们更好地处理 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36924