babel 通过 @babel/plugin-transform-classes 将 class 转为构造函数+原型操作,处理实例/静态方法、继承(含 _inherits/_classcallcheck)、super() 调用;不处理类字段、私有成员或内置 api 补丁。

Babel 通过 @babel/plugin-transform-classes 将 ES6+ 的 class 语法转换为兼容性更强的 ES5 函数形式,核心是把类声明/表达式重写为构造函数 + 原型链操作,并处理静态方法、实例方法、继承等语义。
它具体做了哪些转换?
该插件不依赖外部 polyfill(如 @babel/polyfill 或 core-js),纯语法降级。常见转换包括:
- 将
class Person { constructor(name) { this.name = name; } }转为function Person(name) { this.name = name; } - 把实例方法(如
say() { return 'hi'; })挂载到Person.prototype.say = function() { ... } - 把静态方法(如
static create() { ... })挂载到构造函数本身:Person.create = function() { ... } - 处理
extends:用inherits()辅助函数实现原型链继承,并用_classCallCheck()检查是否通过new调用 - 对类字段(如
name = 'default';)默认不处理——需配合@babel/plugin-proposal-class-properties
如何启用这个插件?
它已包含在 Babel 的预设中(如 @babel/preset-env),通常无需手动安装。若需单独控制:
- 安装:
npm install --save-dev @babel/plugin-transform-classes - 在
.babelrc或babel.config.js中添加:{"plugins": ["@babel/plugin-transform-classes"]} - 注意:如果使用
@babel/preset-env,它会根据targets自动决定是否启用该插件(例如目标设为 IE11 时启用,设为 Chrome 80+ 可能跳过)
和继承相关的细节要注意什么?
当存在 extends 时,Babel 会注入辅助函数(如 _inherits、_createSuper),这些函数默认内联或从 @babel/runtime 引入:
- 默认行为:辅助函数以内联方式插入每个文件,可能导致重复代码
- 推荐生产环境搭配
@babel/plugin-transform-runtime,复用辅助函数并避免污染全局作用域 -
super()调用会被转为_get(_getPrototypeOf(...), "constructor", this).call(this, ...)这类结构,确保正确绑定父类构造逻辑
它不负责哪些事情?
该插件专注语法转换,以下内容需其他插件或配置配合:
- 类字段(
prop = 1)、私有字段(#private)、装饰器(@decorator)——需对应提案插件 - 子类中
super.xxx访问父类属性(非构造调用)——由@babel/plugin-transform-classes处理,但底层依赖@babel/helper-create-class-features-plugin - Symbol、Promise、Map 等内置对象的缺失——属于运行时补丁,需
core-js和正确的 entry 配置
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











