前言
Babel 是一个 JavaScript 编译器，可以将 ES6+ 代码转换为向后兼容的 JavaScript 代码。随着 ECMAScript 规范的不断更新，Babel 也在不断升级。2019 年的 Babel7 在配置方面有了很多变化，本文将为大家介绍最新的 Babel7 配置指南，帮助大家更好的了解 Babel7 的使用。
安装 Babel7
在开始配置 Babel7 之前，需要首先安装 Babel7。可以通过以下命令在项目中安装 Babel7：
npm install --save-dev @babel/core @babel/cli
以上命令会安装 @babel/core 和 @babel/cli 两个依赖包。
创建配置文件
Babel7 的配置文件名为 .babelrc，需要在项目的根目录下创建该文件。在该文件中可以指定要使用的插件和预设。
以下是一个基本配置文件示例：
{
"presets": [
"@babel/preset-env"
]
}以上配置文件指定了一个预设，即 @babel/preset-env。预设是一组插件的集合，可以完成一系列特定的转换任务。在这个示例中，@babel/preset-env 会将最新的 ES6+ 代码转换为向后兼容的 JavaScript 代码。
配置选项
Babel7 的配置选项可以分为两类：插件和预设。
插件
Babel7 的插件可以用于完成一些特定的转换任务。可以通过以下命令来安装插件：
npm install --save-dev babel-plugin-plugin-name
以上命令就会将名为 babel-plugin-plugin-name 的插件安装到项目中。
在使用插件时，需要在配置文件中指定该插件。以下是一个示例：
{
"plugins": [
"babel-plugin-plugin-name"
]
}预设
Babel7 的预设是一组插件的集合，可以完成一系列特定的转换任务。预设一般是针对不同的 JavaScript 版本进行配置的。
可以通过以下命令安装预设：
npm install --save-dev @babel/preset-preset-name
以上命令会将名为 @babel/preset-preset-name 的预设安装到项目中。
在使用预设时，需要在配置文件中指定该预设。以下是一个示例：
{
"presets": [
"@babel/preset-preset-name"
]
}最佳实践
指定目标浏览器
在配置 Babel7 时，最好指定要支持的目标浏览器的列表。可以使用 browserslist 来指定这个列表，该列表可以在多个工具和插件之间共享。
可以在 package.json 文件中添加 browserslist 属性，例如：
{
"browserslist": [
"last 2 versions"
]
}以上配置指定了最近两个版本的浏览器都应该支持，可以根据具体需求进行调整。
使用 polyfill
Babel7 的 @babel/polyfill 模块可以让开发者在目标浏览器中使用新的 JavaScript 特性。例如，如果目标浏览器不支持 Promise，那么可以使用该模块来提供 Promise 功能。
可以通过以下命令来安装 @babel/polyfill：
npm install --save @babel/polyfill
在使用该模块时，需要在代码的入口处导入该模块，例如：
import '@babel/polyfill';
以上代码会将 @babel/polyfill 中的所有特性导入到当前文件中。
结论
Babel7 是一个强大的 JavaScript 编译器，可以将 ES6+ 代码转换为向后兼容的 JavaScript 代码。在使用 Babel7 时需要创建配置文件，指定使用的插件和预设。在实践中，最好指定目标浏览器，并使用 @babel/polyfill 模块来提供新的 JavaScript 特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e7766e30a6581ceb4988e