Babel 中文网
  • 中文文档
  • 设置
  • 试一试
  • 视频(需翻墙)
  • 博客
  • 团队
  • 英文官网

›杂项

指南

  • Babel 是什么?
  • 使用指南
  • 配置 Babel
  • 学习 ES2015
  • 升级到 Babel 7

配置

  • Config Files
  • Config Options
  • 预设(Presets)
  • 插件
  • Plugins List
  • Compiler assumptions

预设(Presets)

  • @babel/preset-env
  • @babel/preset-react
  • @babel/preset-typescript
  • @babel/preset-flow

杂项

  • 路线图
  • 附加说明
  • Features Timeline
  • FAQ
  • 编辑器

集成

  • @babel/cli
  • @babel/polyfill
  • @babel/plugin-transform-runtime
  • @babel/register
  • @babel/standalone

工具

  • @babel/parser
  • @babel/core
  • @babel/generator
  • @babel/code-frame
  • @babel/runtime
  • @babel/template
  • @babel/traverse
  • @babel/types

辅助

  • helper-compilation-targets
  • helper-module-imports
Edit

FAQ

为什么 for...of 被转换之后如此冗长且丑陋?

为了符合规范,迭代器(iterator)的返回方法必须是 出错时才能调用。另一个方法是使用 Babel 7.13 中引入的 assumptions,例如 ArrayLikeIsIterable 和 IterableIsArray, 但是请注意,如果你使用了 assumptions 并且执意选择不遵守规范的话,将会收到 很多 警告。

请参考 babel/rfcs#5、google/traceur-compiler#1773 和 babel/babel#838 以了解更多信息。

为什么在箭头函数(arrow function)中重新映射了 this 和 arguments ?

箭头函数与普通函数 不同。arguments 和 this 在箭头函数中 用的是包裹箭头函数的 外部函数 ,例如:

const user = {
  firstName: "Sebastian",
  lastName: "McKenzie",
  getFullName: () => {
    // whoops! `this` doesn't actually reference `user` here
    return this.firstName + " " + this.lastName;
  },
  // use the method shorthand in objects
  getFullName2() {
    return this.firstName + " " + this.lastName;
  },
};

请参考 babel/babel#842、babel/babel#814、 babel/babel#733 和 babel/babel#730 以 了解更多信息。

为什么将 this 重新映射到 undefined?

Babel 假设所有输入的代码都是 ES2015 模块。ES2015 模块默认是严格模式(strict mode),因此这意味着 浏览器中的顶级 this 不是 window,在 node 中也不是 exports 。

如果你不想要这种行为方式,可以在 plugin-transform-modules-commonjs 插件中关闭 strict 参数。

请注意: 如果你这样做了,你将不符合规范,这可能在将来导致兼容问题。

求助?!我只想像 5.x 版本那样使用 Babel!现在的一切都太复杂了!

我们听到了!Babel 6 只需要一点点配置就能如你所愿。 我们认为这样是最好的 ,并且还添加了一些 preset 用来简化这种版本间的转换。

从 Babel 5.x 升级到 Babel 6

Babel 6 的核心是 插件。需要什么插件完全 取决于你的配置,但是只需添加以下 配置文件 即可获得与 Babel 5 相同的转换结果:

{
  "presets": ["env", "react", "stage-2"]
}
npm install babel-preset-env babel-preset-react babel-preset-stage-2 --save-dev

另外请参考我们的这篇博文 设置 Babel 6 。

所有的文档都去哪儿了?!

Babel 6 移除了很多参数,更多功能交由 插件 实现,因此 很多文档不再适用了。

对于每个被删除的参数,都应该有一个插件与之对应。也有可能是我们丢失了某些文档, 如果你觉得是这种情况的话,请 向我们提交 issue!

Babel 是一个开源项目,我们非常感谢我们所得到的任何贡献。 如果你能帮我们完善文档,请提交 pull request 到 babel.github.io 仓库。

如何从源码构建 babel?

请参考 构建说明。

如何为 Babel 贡献出自己的一份力量?

请参阅 contributing 文档。

为什么会提示语法错误(Syntax Error)/非预期标记(Unexpected Token)?

最有可能的情况是,你没有包含支持该功能的插件或 preset。(也可能是解析器的 bug,或者实际上只是语法错误)。

为什么某个 babel-x 软件包(package)没有更新?

我们当前使用的是 Lerna 的固定版本 系统。

所有软件包共用一个版本号。当我们发布版本时,唯一被更新的是 实际发生了改变的软件包(package)(我们对该文件夹执行了 git diff 操作)。

例如我们只更新 babel-plugin-transform-exponentiation-operator 到 6.x.x,由于其他依赖项使用的是 ^,因此我们不发布所有软件包的新版本。

例如,Babel v6.6.0 版本 并不意味着所有软件包(package)现在都是 6.6.0 版本。

为了确保你所使用的是最新版本的软件包(package),你可能需要删除 node_modules 目录并重新执行 npm install 命令。

← Features Timeline编辑器 →
  • 为什么 for...of 被转换之后如此冗长且丑陋?
  • 为什么在箭头函数(arrow function)中重新映射了 this 和 arguments ?
  • 为什么将 this 重新映射到 undefined?
  • 求助?!我只想像 5.x 版本那样使用 Babel!现在的一切都太复杂了!
  • 从 Babel 5.x 升级到 Babel 6
  • 所有的文档都去哪儿了?!
  • 如何从源码构建 babel?
  • 如何为 Babel 贡献出自己的一份力量?
  • 为什么会提示语法错误(Syntax Error)/非预期标记(Unexpected Token)?
  • 为什么某个 babel-x 软件包(package)没有更新?
Babel 中文网
中文文档
学习 ES2015
社区
视频(需翻墙)用户列表Stack OverflowSlack ChannelTwitter
更多
博客GitHub OrgGitHub RepoWebsite Repo旧版 6.x 网址旧版 5.x 网址
友链
Bootstrap中文网ReactNext.jsDocusaurusBlitzGatsbyRecoilReduxMDXMarkdownVue.jsAlpine.jsVuePressNuxt.jsGridsomePreactSvelteSapperWebpackRollup.jsParcelNPMYarnpnpmGulpjQuerySASSTailwindCSSPurgeCSScssnanoPostCSSJestWebAssemblyDeno
Babel 中文文档采用 MIT 开源协议发布。
本站点(babeljs.cn)仅用于 “Babel 中文文档”,与 babeljs.io 没有任何关系。Babel 项目及相关资源的版权归 babeljs.io 所有。
冀ICP备14002930号-1