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

›ES2015

扩展

  • React Plugin
  • Flow Plugin
  • Typescript Plugin

模块

  • AMD
  • Common JS
  • SystemJS
  • UMD

TC39 提案

  • async-do-expressions
  • decorators
  • do-expressions
  • export-default-from
  • function-bind
  • function-sent
  • partial-application
  • pipeline-operator
  • private-methods
  • record-and-tuple
  • throw-expressions

@babel/preset-env

    ES2022

    • class-properties
    • class-static-block
    • private-property-in-object
    • syntax-top-level-await

    ES2021

    • logical-assignment-operators
    • numeric-separator

    ES2020

    • export-namespace-from
    • nullish-coalescing-operator
    • optional-chaining
    • syntax-bigint
    • syntax-dynamic-import
    • syntax-import-meta

    ES2019

    • optional-catch-binding
    • json-strings

    ES2018

    • async-generator-functions
    • object-rest-spread
    • unicode-property-regex
    • dotall-regex
    • named-capturing-groups-regex

    ES2017

    • async-to-generator

    ES2016

    • exponentiation-operator

    ES2015

    • arrow-functions
    • block-scoping
    • classes
    • computed-properties
    • destructuring
    • duplicate-keys
    • for-of
    • function-name
    • instanceof
    • literals
    • new-target
    • object-super
    • parameters
    • shorthand-properties
    • spread
    • sticky-regex
    • template-literals
    • typeof-symbol
    • unicode-escapes
    • unicode-regex

    ES5

    • property-mutators

    ES3

    • member-expression-literals
    • property-literals
    • reserved-words
Edit

@babel/plugin-transform-classes

NOTE: This plugin is included in @babel/preset-env

Caveats

When extending a native class (e.g., class extends Array {}), the super class needs to be wrapped. This is needed to workaround two problems:

  • Babel transpiles classes using SuperClass.apply(/* ... */), but native classes aren't callable and thus throw in this case.
  • Some built-in functions (like Array) always return a new object. Instead of returning it, Babel should treat it as the new this.

The wrapper works on IE11 and every other browser with Object.setPrototypeOf or __proto__ as fallback. There is NO IE <= 10 support. If you need IE <= 10 it's recommended that you don't extend natives.

Babel needs to statically know if you are extending a built-in class. For this reason, the "mixin pattern" doesn't work:

class Foo extends mixin(Array) {}

function mixin(Super) {
  return class extends Super {
    mix() {}
  };
}

To workaround this limitation, you can add another class in the inheritance chain so that Babel can wrap the native class:

const ExtensibleArray = class extends Array {};

class Foo extends mixin(ExtensibleArray) {}

Examples

In

class Test {
  constructor(name) {
    this.name = name;
  }

  logger() {
    console.log("Hello", this.name);
  }
}

Out

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Test = (function() {
  function Test(name) {
    _classCallCheck(this, Test);

    this.name = name;
  }

  Test.prototype.logger = function logger() {
    console.log("Hello", this.name);
  };

  return Test;
})();

Installation

npm install --save-dev @babel/plugin-transform-classes

Usage

With a configuration file (Recommended)

// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "loose": true
    }]
  ]
}

Via CLI

babel --plugins @babel/plugin-transform-classes script.js

Via Node API

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-classes"],
});

Options

loose

boolean, defaults to false.

⚠️ Consider migrating to the top level assumptions which offers granular control over various loose mode deductions Babel has applied.

// babel.config.json
{
  "assumptions": {
    "constantSuper": true,
    "noClassCalls": true,
    "setClassMethods": true,
    "superIsCallableConstructor": true
  }
}

Method enumerability

Please note that in loose mode class methods are enumerable. This is not in line with the spec and you may run into issues.

Method assignment

Under loose mode, methods are defined on the class prototype with simple assignments instead of being defined. This can result in the following not working:

class Foo {
  set bar() {
    throw new Error("foo!");
  }
}

class Bar extends Foo {
  bar() {
    // will throw an error when this method is defined
  }
}

When Bar.prototype.foo is defined it triggers the setter on Foo. This is a case that is very unlikely to appear in production code however it's something to keep in mind.

You can read more about configuring plugin options here

← block-scopingcomputed-properties →
  • Caveats
  • Examples
  • Installation
  • Usage
    • With a configuration file (Recommended)
    • Via CLI
    • Via Node API
  • Options
    • loose
Babel 中文文档
文档
学习 ES2015
社区
视频用户Stack OverflowSlack 频道Twitter
更多
博客GitHub 组织GitHub 仓库Website 仓库旧版网址 6.x旧版网址 5.x