Babel 中文文档
  • 印记中文
  • 文档
  • 配置
  • 试用
  • 视频
  • 博客
  • 赞助
  • 团队
  • GitHub

›杂项

指南

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

配置参考

  • 配置文件
  • Config Options
  • 预设
  • 插件
  • 插件列表
  • Compiler assumptions

预设

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

杂项

  • 路线图
  • 注意事项
  • 新增特性时间轴
  • 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

注意事项

Polyfills

In order for certain features to work they require certain polyfills. You can satisfy all Babel feature requirements by using a complete polyfill such as core-js/actual or (if you want to load it using a <script> tag) core-js-bundle.

You may alternatively/selectively include what you need:

FeatureRequirements
Array destructuring, For OfSymbol, prototype[Symbol.iterator]
SpreadArray.from

If you are compiling generators or async function to ES5, and you are using a version of @babel/core or @babel/plugin-transform-regenerator older than 7.18.0, you must also load the regenerator runtime package. It is automatically loaded when using @babel/preset-env's useBuiltIns: "usage" option or @babel/plugin-transform-runtime.

Built-ins

Babel assumes that built-ins (e.g. Array, WeakMap and others), if polyfilled, are modified in a manner that is spec-compliant.

Classes

Built-in classes such as Date, Array, DOM etc cannot be properly subclassed due to limitations in ES5 (for the transform-classes plugin). You can try to use babel-plugin-transform-builtin-extend based on Object.setPrototypeOf and Reflect.construct, but it also has some limitations.

ES5

Since Babel assumes that your code will run in an ES5 environment it uses ES5 functions. So if you're using an environment that has limited or no support for ES5 such as lower versions of IE then using @babel/polyfill will add support for these methods.

Internet Explorer

Classes (10 and below)

If you're inheriting from a class then static properties are inherited from it via __proto__, this is widely supported but you may run into problems with much older browsers.

NOTE: __proto__ is not supported on IE <= 10 so static properties will not be inherited. See the protoToAssign for a possible work around.

For classes that have supers, the super class won't resolve correctly. You can get around this by enabling the loose option in the transform-classes plugin.

Getters/setters (8 and below)

In IE8 Object.defineProperty can only be used on DOM objects. This is unfortunate as it's required to set getters and setters. Due to this if you plan on supporting IE8 or below then the usage of getters and setters isn't recommended.

Reference: MDN.

Modules

By default, when using modules with Babel a non-enumerable __esModule property is exported. This is done through the use of Object.defineProperty which is unsupported in IE8 and below. A workaround for this is to enable the loose option in your corresponding module plugin.

← 路线图新增特性时间轴 →
  • Polyfills
  • Built-ins
  • Classes
  • ES5
  • Internet Explorer
    • Classes (10 and below)
    • Getters/setters (8 and below)
Babel 中文文档
文档
学习 ES2015
社区
视频用户Stack OverflowSlack 频道Twitter
更多
博客GitHub 组织GitHub 仓库Website 仓库旧版网址 6.x旧版网址 5.x