前言
现代前端发展迅速，新技术层出不穷，然而 web 浏览器对于新的 ECMAScript 标准支持不尽如人意。为了方便前端开发者使用新的语言特性，我们需要使用 Babel 转译器将 ES6+ 代码转为兼容性更好的代码。
Babel 简介
Babel 是一个 JavaScript 编译器，使用它可以将较新版本的 JavaScript 代码转换为可以在当前和旧版浏览器上运行的 JavaScript。Babel 目前已广泛应用于现代前端技术的开发中，比如 React，Webpack 等。
安装 Babel
Babel 的安装非常简单，只需在当前目录下执行以下命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
该命令将会安装 Babel 的核心模块以及预设变换（preset）。
使用 Babel
在工程目录下，我们创建一个 index.js 文件，内容为：
const name = 'John';
const age = 25;
console.log(`My name is ${name}, and I'm ${age} years old.`);接着我们执行以下命令，将文件 index.js 转译为兼容的代码：
npx babel index.js --out-file bundle.js --presets=@babel/preset-env
该命令将把 index.js 转译为兼容的 bundle.js 文件，其中 --presets=@babel/preset-env 表示使用 Babel 预设变换。
转译后的代码如下：
"use strict";
var name = 'John';
var age = 25;
console.log("My name is ".concat(name, ", and I'm ").concat(age, " years old."));使用新的语言特性
下面我们将使用一些新的特性来解释如何在 Babel 下使用新的语言特性。
解构
ES6 引入了解构（destructuring）的概念，可以通过解构让代码更加简洁易懂。比如：
const obj = {a: 1, b: 2, c: 3};
// 等价于
const a = obj.a;
const b = obj.b;
const c = obj.c;
console.log(a, b, c);上述代码可以使用解构语法来重新写：
const {a, b, c} = {a: 1, b: 2, c: 3};
console.log(a, b, c);箭头函数
箭头函数（arrow function）就是一种更简洁的函数语法，它可以减少冗长的代码。比如：
-- -------------------- ---- ------- -- --- --- --- - --- -- --- --- --------- - ---------------- --- - ------ - - -- --- -- --- ----- --- - --- -- --- ----- --------- - --------- -- - - ---
Promise
Promise 是 JavaScript 中一种非常重要的异步编程解决方案，可以让我们的代码更加简洁易懂，并且方便维护。比如：
-- -------------------- ---- -------
-- ---
----------------------
----------------- - -------------
-- ------
-- ---
--- ------------------------- -
------------- -- ------------- - ------------- ------
---默认函数参数
默认函数参数（default function parameter）是 ES6 新增的语言特性，可以省去在函数内部检查参数的复杂代码。比如：
-- -------------------- ---- ------- -- --- -------- ----------- ------ - ----- - ----- -- -- ------ ----------- - ------------- - -- --- -------- ----------- ----- - -- - ------ ----------- - ------------- - ----------------------------- -- --------------- --------------------------- ---- -- ----------
总结
Babel 是开发现代化 web 应用程序所必须的技术之一。使用 Babel 可以让我们更好地使用新的技术特性，并且让我们的代码兼容更多的浏览器。希望此文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ce0811b5eee0b5255fbfc1