JavaScript 转译器 Babel

最热门的 JavaScript 转译器是 Babel / 英。

Babel 的原始名称更具描述性——6to5。这是因为，一开始 Babel 专门将 ES6 代码转换为 ES5 代码，但是现在 Babel 具有更多功能了。它可以将 ES6 转换为 ES5、将 JSX 转换为 JavaScript，并将 Flow 转换为 JavaScript。

在计算机上查看转译代码之前，我们快速做个测验，直接在 Babel 网站上将一些 ES6 代码转译为 ES5 代码。请参阅 Babel 的 REPL / 英，并将以下代码粘贴到左侧部分：

class Student {
  constructor (name, major) {
    this.name = name;
    this.major = major;
  }

  displayInfo() {
    console.log(`${this.name} is a ${this.major} student.`);
  }
}

const richard = new Student('Richard', 'Music');
const james = new Student('James', 'Electrical Engineering');

左侧的 ES6 代码正在转译为右侧的 ES5 代码。

资源库中的转译项目

打开此项目的资源库，在第 4 节课目录下的是一个小的项目，已经设置好，可以从 ES6 代码转译为 ES5 代码。有一个"ES6”目录，其中包含我们将使用 Babel 转译为 ES5 代码的 ES6 代码，转译后的 ES5 代码将能够在所有浏览器上运行。

包含将被转译的 ES6 代码的代码编辑器。

Babel 将代码从一种语言转换为另一种语言的方式是使用插件。有一些插件可以将 ES6 箭头函数转换为普通的 ES5 函数（ES2015 箭头函数插件 / 英）。有一些插件可以将 ES6 模板字面量转换为普通的字符串连结（ES2015 模板字面量转换 / 英）。要获得完整的列表，请参阅所有 Babel 插件 / 英。

但是你比较繁忙，没有时间浏览长长的插件列表，看看需要哪些插件才能将 ES6 代码转换为 ES5。因此，Babel 提供了将插件绑定到一起的 预设，这样就不用使用大量的单个插件。我们不再担心需要安装哪些插件，而是直接使用 ES2015 预设 / 英，它包含了我们将 ES6 代码转换为 ES5 代码所需的所有插件。

你会看到该项目具有一个 .babelrc 文件。你需要将项目要用到的所有插件和/或预设放在该文件里。因为我们要转换所有 ES6 代码，因此我们将其设置为具有 ES2015 预设。

列出 ES2015 预设的 .babelrc 文件代码编辑器。

警告：Babel 同时使用 Node / 英 和 NPM / 英 来分发它的插件。在安装任何插件之前，请先安装这两个工具 ：

• 安装 Node / 英