随着 JavaScript 语言的不断发展，新版本推出，也意味着一些新特性和语法的出现。不幸的是，不是所有的浏览器都能够支持这些新特性。为此，开发者们需要使用 Babel 转译器来将新版本的 JavaScript 代码转译成旧版本的代码，以便在旧版浏览器中进行运行。
本文将详细介绍 Babel 转译器的使用，并讨论 ES6 和 ES7 中一些常见的 preset。同时，我们也会提供一些代码示例，以便读者更好的理解。
Babel 转译器
Babel 是一个广泛使用的 JavaScript 编译器，可以将 ECMAScript 2015+ 代码编译成向后兼容的 JavaScript 版本。Babel 不是某种新特性的具体实现，而是将这些新特性实现为一组插件（plugins），每个插件实现一种新特性。
Babel 所涉及到的插件，我们称之为 preset 预设。一个 preset 预设包括了多个 Babel 插件，并一起进行打包和发布。preset 可以自定义配置，以便适应开发者自己的开发方式。
ES6 Preset
ES6 是 ECMAScript 2015 的缩写，它引入了一些新特性，如箭头函数，const 常量，解构赋值等。这些特性的引入，给开发者们提供了一些新的编码方式和编程语言特性。但是，旧版浏览器并不支持这些语法。
下面是 ES6 的预设配置。
@babel/preset-env
这个 preset 可以在不针对特定浏览器的情况下，根据指定的 environment 配置用来自动地将特定的 JavaScript 代码转换为向后兼容的版本。它可以在被应用到不同的环境时按需转换新 JavaScript 功能。
// javascriptcn.com 代码示例
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
chrome: '58',
ie: '11'
}
}
]
]
};@babel/preset-stage-3
该 preset 用于将 ECMAScript 6 的 stage 3 语法转译成旧版语法，包括 proposal 提案的一些特性，比如 Class 静态属性、私有字段等。通过添加这个 preset，开发者们可以使用最新的语法实验。
module.exports = {
presets: [['@babel/preset-stage-3']]
};ES7 Preset
ES7 随着 JavaScript 的发展而产生，它增加的主要特性是 Async/await。它使得 JavaScript 可以方便地管理异步调用和 Promises。但是，即使在最新浏览器中，这些语法也可能不适用（比如在 NodeJS 6.x 以及低版本浏览器中）。
下面是 ES7 的预设配置。
@babel/preset-stage-4
用于将 ECMAScript 7 的 stage 4 语法转译为旧版语法。stage 4 是 ECMAScript 7 中的最后一个标准化阶段，它包括了 Async 和 await 等语法。
module.exports = {
presets: [['@babel/preset-stage-4']]
};总结
Babel 是一个高度灵活的工具，可以通过其插件来定制转换的操作。当然，要想在项目开发中有良好的体验，我们需要选择合适的 preset 预设，可以通过 @babel/preset-env 和 @babel/preset-stage-4 将新版本的 JavaScript 转换为可运行在旧版浏览器中的 JavaScript。
最后，建议开发者们根据自己的开发方式，灵活选择需要使用的 preset 预设，并通过源码注释以及阅读 API 文档来深入理解代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b74617d4982a6eb54705e