What is @babel/plugin-transform-new-target?
The @babel/plugin-transform-new-target npm package is designed to transform instances of the `new.target` meta-property within functions. This is particularly useful for compiling ES6 code to be compatible with environments that do not support the `new.target` syntax. The `new.target` property is used within constructors to determine if the constructor was called with the `new` operator, allowing constructors to identify how they were invoked and to behave differently if necessary.
What are @babel/plugin-transform-new-target's main functionalities?
Transforming new.target
This feature allows the transformation of `new.target` usage into a form that can be understood by environments that do not support this syntax. It checks if the constructor was called with `new` and throws an error if it wasn't, ensuring that the constructor behaves as intended even in older JavaScript environments.
function MyConstructor() {\n if (!new.target) {\n throw 'MyConstructor must be called with new';\n }\n console.log('MyConstructor was called with new');\n}\n// Transformed Code:\nfunction MyConstructor() {\n var _newtarget = this instanceof MyConstructor ? this.constructor : void 0;\n if (!_newtarget) {\n throw 'MyConstructor must be called with new';\n }\n console.log('MyConstructor was called with new');\n}
Other packages similar to @babel/plugin-transform-new-target
@babel/plugin-transform-arrow-functions
Similar to @babel/plugin-transform-new-target, this package transforms ES6 arrow functions into function expressions that older JavaScript environments can understand. While it focuses on arrow functions rather than the `new.target` property, both plugins serve the purpose of making modern JavaScript code compatible with older environments.
@babel/plugin-transform-classes
This package transforms ES6 class syntax into equivalent ES5 constructor functions. Like @babel/plugin-transform-new-target, it deals with issues related to constructor functions and their invocation, ensuring that class-based code can run in environments that do not support the ES6 class syntax.
@babel/plugin-transform-new-target
This plugins allows babel to transform new.target
meta property into a
(correct in most cases) this.constructor
expression.
Example
function Foo() {
console.log(new.target);
}
Foo();
new Foo();
class Foo {
constructor() {
console.log(new.target);
}
}
class Bar extends Foo {
}
new Foo();
new Bar();
Caveats
This plugin relies on this.constructor
, which means super
must
already have been called when using untransformed classes.
class Foo {}
class Bar extends Foo {
constructor() {
new.target;
super();
}
}
Additionally, this plugin cannot transform all Reflect.construct
cases
when using newTarget
with ES5 function classes (transformed ES6 classes).
function Foo() {
console.log(new.target);
}
function Bar() {
Foo.call(this);
}
Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.constructor = Bar;
function Baz() {}
Reflect.construct(Foo, []);
Reflect.construct(Foo, [], Bar);
Reflect.construct(Bar, []);
Reflect.construct(Foo, [], Baz);
Installation
npm install --save-dev @babel/plugin-transform-new-target
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["@babel/transform-new-target"]
}
Via CLI
babel --plugins @babel/transform-new-target script.js
Via Node API
require("@babel/core").transform("code", {
plugins: ["@babel/transform-new-target"]
});