在前端开发中，我们通常需要使用 ES6+ 语法来编写代码，但是这些新特性并不被所有浏览器所支持。为了让我们的代码能够在各种浏览器上得到正确的运行，我们通常会使用 Babel 进行转译。而 babel-preset-airbnb 则是一个非常流行的 Babel 插件集合，它包含了一系列的插件和规则，可以帮助我们提高代码质量和可读性。
安装
首先，你需要在项目中安装 babel-preset-airbnb。你可以通过以下命令使用 npm 进行安装：
npm install --save-dev babel-preset-airbnb
配置
一旦安装完成，你需要在 .babelrc 文件中配置 babel-preset-airbnb。你可以创建一个新文件 .babelrc，然后添加以下内容：
{
"presets": ["airbnb"]
}这样就完成了 babel-preset-airbnb 的配置，接下来你就可以开始使用它了。
示例
假设你有一个 ES6+ 的文件 index.js，其中包含了箭头函数、模板字面量等新特性：
const name = 'World';
const greet = () => {
console.log(`Hello, ${name}!`);
};
greet();如果你直接将这个文件进行编译，那么你会得到一个语法错误：
SyntaxError: Unexpected token =>
这是因为箭头函数并不被所有浏览器所支持。为了解决这个问题，你可以使用 babel-preset-airbnb 进行转译。首先，你需要在项目中安装 @babel/core 和 @babel/cli：
npm install --save-dev @babel/core @babel/cli
然后，你可以使用以下命令进行转译：
npx babel index.js --out-file index.es5.js
这样你就会得到一个新的文件 index.es5.js，其中包含了经过转译后的代码：
"use strict";
var name = 'World';
var greet = function greet() {
console.log("Hello, ".concat(name, "!"));
};
greet();现在，你可以将 index.es5.js 文件插入到你的 HTML 页面中，它就可以在各种浏览器上正确地运行了。
结语
总结一下，babel-preset-airbnb 是一个非常实用的 Babel 插件集合，它可以帮助我们处理各种 ES6+ 的语法，并提高我们代码的质量和可读性。通过本文的介绍，相信你已经学会了如何安装、配置，并使用它来转译代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50297