Babel 6 配置指南

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

Babel 6 刚刚发布，我们仍在完善各项功能。过去两天里，GitHub 和 Slack 上的活跃度达到了前所未有的高度。所有提供帮助的贡献者都做得非常出色。

不过当前文档仍有不足，我正在着手为网站创建全新的"入门指南"章节。

在完成之前，本文将涵盖大部分基础配置内容。

安装 Babel

babel 包已被弃用。此前它包含完整的编译器、所有转换器以及大量 CLI 工具，但这会导致不必要的臃肿下载且容易令人困惑。现在我们将其拆分为两个独立包：babel-cli 和 babel-core。

Shell

$ npm install --global babel-cli
# or
$ npm install --save-dev babel-core

如需通过命令行使用 Babel，请安装 babel-cli；如需使用 Node API，则安装 babel-core。

目前大多数集成尚未适配 Babel 6，但这将在未来几天内逐步更新。

添加插件与预设

Babel 6 默认不包含任何转换器，因此当你对文件运行 Babel 时，它只会原样输出而不做任何修改。

要编译特定功能需先安装插件。例如若需使用箭头函数：

首先安装箭头函数插件：

Shell

$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions

然后将其添加到 .babelrc 文件：

JavaScript

{
  "plugins": ["transform-es2015-arrow-functions"]
}

此时对包含箭头函数的文件运行 Babel 即可完成编译。很简单对吗？别急。

Babel 插件采用渐进式降级设计。假设使用 ES2019 功能，它会先编译到 ES2018，再到 ES2017，依此类推。这确保了用户可根据需要选择原生实现。

这种降级甚至发生在同一规范内，例如 ES2015 的常量会被编译为 ES2015 的 let 变量。因此若要降级到 ES5，仍需额外编译。

Shell

$ npm install --save-dev babel-plugin-check-es2015-constants
$ npm install --save-dev babel-plugin-transform-es2015-block-scoping

JavaScript

{
  "plugins": [
    "check-es2015-constants",
    "transform-es2015-block-scoping"
  ]
}

这些依赖关系不易手动维护，如果不想逐个指定，可以改用预设（preset）。

Shell

$ npm install --save-dev babel-preset-es2015

JavaScript

{
  "presets": ["es2015"]
}

包含所有 JavaScript 版本的预设：

Shell

$ npm install --save-dev babel-preset-env

JavaScript

{
  "presets": ["env"]
}

React 也有专属预设：

Shell

$ npm install --save-dev babel-preset-react

JavaScript

{
  "presets": ["react"]
}

这也取代了原先的 stage 选项：

Shell

$ npm install --save-dev babel-preset-stage-2

JavaScript

{
  "presets": ["stage-2"]
}

注意：阶段预设会自动包含更高级阶段（例如 stage 1 包含 2 和 3）