How can I use proposal-decorators plugin in @babel/standalone environment?
#16182
-
|
I want to use decorators in the I followed this document and wrote the following code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script>
Babel.registerPreset("env-plus", {
presets: [[Babel.availablePresets["env"], { loose: true }]],
plugins: [
[
Babel.availablePlugins["proposal-decorators"],
{ version: "2023-01" },
],
],
});
</script>
<script type="text/babel" data-presets="env-plus">
function decorateFoo(constructor) {
constructor.prototype.foo = 42;
}
@decorateFoo
class Example {
constructor() { }
}
console.log(new Example().foo);
</script>
</head>
</html>However, this code raises an error and does not work. Here is the error message in the browser console: Removing the preset |
Beta Was this translation helpful? Give feedback.
Answered by
liuxingbaoyu
Dec 22, 2023
Replies: 1 comment 1 reply
-
|
As a temporary solution, you can set an empty <script type="text/babel" data-presets="env-plus" data-plugins="">
function decorateFoo(constructor) {
constructor.prototype.foo = 42;
}
@decorateFoo
class Example {
constructor() { }
}
console.log(new Example().foo);
</script> |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
@liuxingbaoyu I also succeeded to run Angular code with Babel like this way: <script type="module">
import {
availablePlugins,
availablePresets,
registerPreset,
} from "https://esm.sh/@babel/[email protected]";
registerPreset("angular", {
presets: [[availablePresets["typescript"]]],
plugins: [
[availablePlugins["proposal-decorators"], { version: "legacy" }],
[availablePlugins["transform-class-properties"]],
],
});
</script>
<!-- `data-plugins=""` attribute is required for @babel/[email protected] -->
<script type="text/babel" data-presets="angular" data-plugins="" data-type="module" src="./main.ts"></script>// add importmap for these imports
import "@angular/compiler";
import "zone.js";
// ordinary Angular code continues |
Beta Was this translation helpful? Give feedback.
Answer selected by
reosablo
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
As a temporary solution, you can set an empty
data-plugins.