前言
ES6（ECMAScript 2015）是 JavaScript 的一个新版本，它引入了很多新的语法和特性，使得 JavaScript 变得更加强大和易于使用。然而，由于不是所有的浏览器都支持 ES6，因此在开发过程中需要使用 Babel 进行转译，使得 ES6 代码可以在所有浏览器上运行。
本文将介绍如何使用 Babel 转译 ES6 代码，包括安装和配置 Babel、使用 Babel 进行转译以及一些常见的问题和解决方法。
安装和配置 Babel
安装 Babel 非常简单，只需要使用 npm 或者 yarn 进行安装即可：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
或者：
yarn add --dev @babel/core @babel/cli @babel/preset-env
安装完成后，我们需要配置 Babel。在项目根目录下新建一个 .babelrc 文件，并添加如下内容：
{
"presets": ["@babel/preset-env"]
}这里使用了 @babel/preset-env 预设，它可以根据我们的配置自动转译我们的代码，使得代码可以在所有浏览器上运行。
使用 Babel 进行转译
安装和配置完成后，我们就可以使用 Babel 进行转译了。我们可以使用命令行进行转译，也可以使用构建工具（如 webpack）进行转译。
命令行转译
使用命令行进行转译非常简单，只需要使用以下命令：
npx babel src --out-dir dist
这里假设我们的源代码在 src 目录下，转译后的代码将会输出到 dist 目录下。
webpack 转译
如果我们使用 webpack 进行开发，我们可以使用 babel-loader 进行转译。我们需要将 babel-loader 添加到 webpack 的配置文件中，例如：
// www.javascriptcn.com code example
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
};这里假设我们的源代码文件后缀为 .js，我们需要排除 node_modules 目录，使用 babel-loader 进行转译，并且使用 @babel/preset-env 预设进行转译。
常见问题和解决方法
在使用 Babel 进行转译时，我们可能会遇到一些问题。下面介绍一些常见的问题和解决方法。
1. Babel 无法转译 Promise 和 async/await
这是因为 @babel/preset-env 预设默认只转译 ES6 的语法特性，而 Promise 和 async/await 并不属于语法特性，因此需要使用插件进行转译。
我们可以使用 @babel/plugin-transform-runtime 插件进行转译。首先安装插件：
npm install --save-dev @babel/plugin-transform-runtime
然后修改 .babelrc 文件：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}2. Babel 无法转译 import/export
这是因为 @babel/preset-env 预设默认只转译 ES6 的语法特性，而 import/export 并不属于语法特性，因此需要使用插件进行转译。
我们可以使用 @babel/plugin-proposal-import-export 插件进行转译。首先安装插件：
npm install --save-dev @babel/plugin-proposal-import-export
然后修改 .babelrc 文件：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-import-export"]
}3. Babel 无法转译 class
这是因为 @babel/preset-env 预设默认只转译 ES6 的语法特性，而 class 并不属于语法特性，因此需要使用插件进行转译。
我们可以使用 @babel/plugin-proposal-class-properties 插件进行转译。首先安装插件：
npm install --save-dev @babel/plugin-proposal-class-properties
然后修改 .babelrc 文件：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}示例代码
下面是一个使用 ES6 语法编写的示例代码：
// www.javascriptcn.com code example
const sum = (a, b) => {
return a + b;
};
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
const person = new Person("Alice");
person.sayHello();
import { fetchData } from "./api";
fetchData().then(data => {
console.log(data);
});使用 Babel 进行转译后，代码将会变成这样：
// www.javascriptcn.com code example
"use strict";
var sum = function sum(a, b) {
return a + b;
};
var Person = function () {
function Person(name) {
this.name = name;
}
var _proto = Person.prototype;
_proto.sayHello = function sayHello() {
console.log("Hello, " + this.name + "!");
};
return Person;
}();
var person = new Person("Alice");
person.sayHello();
var _api = require("./api");
(0, _api.fetchData)().then(function (data) {
console.log(data);
});可以看到，使用 Babel 进行转译后，代码变成了 ES5 的语法，可以在所有浏览器上运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d5362ca941bf71349a120b