Babel-Standalone 错误：内联 Babel 脚本：当前未启用对实验性语法“decorators-legacy”的支持 (14:1)：

Question

 // REF : https://jsfiddle.net/happyrupesh/j0v2c1r4/1/ function newConstructor( HumanClass ) { // newConstructorFunc will modify or overwrite the HumanClass contructor function var newConstructorFunc = function(firstName, lastName, age) { this.firstName = firstName this.lastName = lastName this.age = age } return newConstructorFunc } @newConstructor class Human { constructor( firstName, lastName ) { this.firstName = firstName; this.lastName = lastName; } } // Though Human class constructor function takes only two parameters, but due to // newConstructor now Human class can accept 3 parameters var person1 = new Human("Virat", "Kohli", 31); console.log( person1 ); // Displays the modified constructor function console.log( Human.prototype.constructor ); console.log(person1.__proto__.constructor);

I need guidance on using some plugins with Babel Standalone version.我需要在Babel Standalone版本中使用一些插件的指导。 As I have created simple code editor/code playground like JsFiddle to run and execute some code in the browser like ES6 examples, React, RxJs etc..因为我已经创建了像 JsFiddle 这样简单的代码编辑器/代码游乐场来在浏览器中运行和执行一些代码，比如 ES6 示例、React、RxJs 等。

As this is not full stack editor.因为这不是全栈编辑器。 I am using Babel Standalone 7.7 version, now I am trying to run one ES6 @decorator example in that editor, but getting following error.我正在使用Babel Standalone 7.7版本，现在我试图在该编辑器中运行一个 ES6 @decorator 示例，但出现以下错误。 I tried to search the solution over internet but didn't get any answer with proper example.我试图通过互联网搜索解决方案，但没有得到任何正确示例的答案。

Uncaught SyntaxError: /Inline Babel script: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (14:1):

I had found one example of using Presets and Plugins with Babel Standalone : https://jsfiddle.net/0n8w6zh9/我找到了一个在 Babel Standalone 中使用预设和插件的例子： https : //jsfiddle.net/0n8w6zh9/

But not sure how to use @decorator plugin with it.但不确定如何使用@decorator 插件。

Below is the simplified code of my editor:下面是我的编辑器的简化代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Code Editor</title>

    <script src="https://unpkg.com/@babel/standalone@7.7.7/babel.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/@babel/preset-env-standalone@7.7.3/babel-preset-env.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/@babel/plugin-proposal-decorators@7.7.4/lib/index.min.js"
        type="text/javascript"></script>

    <script id="require_method" type="text/javascript">
        function require(module) {
            if (module === "react") return React;
            if (module === "react-dom") return ReactDOM;
            if (module === "react-router-dom") return ReactRouterDOM;
            if (module === "rxjs") return rxjs; // RxJS 5.x
            if (module === "RxJs") return Rx;   // RxJS 6.x
        }
    </script>

    <script>
        // https://jsfiddle.net/0n8w6zh9/
        Babel.registerPreset("my-preset", {
            presets: [
                [Babel.availablePresets["es2015"], { "modules": false }]
            ],
            plugins: [
                [
                    Babel.availablePlugins["babel-preset-env"]
                ]
            ],
            moduleId: "main"
        });
    </script>
</head>

<body>
    <!-- JavaScript Code -->
    <script type="text/babel" data-presets="my-preset">
// code which I want to compile and run using Babel-standalone

        function newConstructor(HumanClass) {
            // newConstructorFunc will modify or overwrite the HumanClass contructor function
            var newConstructorFunc = function (firstName, lastName, age) {
                this.firstName = firstName
                this.lastName = lastName
                this.age = age
            }

            return newConstructorFunc
        }

        @newConstructor
        class Human {
            constructor(firstName, lastName) {
                this.firstName = firstName;
                this.lastName = lastName;
            }
        }

        // Though Human class constructor function takes only two parameters, but due to
        // newConstructor now Human class can accept 3 parameters
        var person1 = new Human("Virat", "Kohli", 31);
        console.log(person1);

        // Displays the modified constructor function
        console.log(Human.prototype.constructor);
        console.log(person1.__proto__.constructor);
    </script>
</body>

</html>

As the same @decorator example is working in JsFiddle when we select "Babel + JSX" option : https://jsfiddle.net/happyrupesh/j0v2c1r4/1/当我们选择“Babel + JSX”选项时，相同的@decorator 示例在 JsFiddle 中工作： https ://jsfiddle.net/happyrupesh/j0v2c1r4/1/

Not sure what I am doing wrong or what is missing in my code.不确定我做错了什么或我的代码中缺少什么。 Please guide on using @decorator functions inside browser using Babel Standalone.请指导使用 Babel Standalone 在浏览器中使用 @decorator 函数。

Thanks,谢谢，

Jignesh Raval吉涅什·拉瓦尔

Working Solution: I have added code snippet also.工作解决方案：我也添加了代码片段。

<script class="static-script babel-standalone" src="https://fiddle.jshell.net/js/babel/babel.js"
        type="text/javascript"></script>
<script type="text/jsx" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy">

    // code which I want to compile and run using Babel-standalone
    console.log('Babel ===', Babel);

    function newConstructor(HumanClass) {
        // newConstructorFunc will modify or overwrite the HumanClass contructor function
        var newConstructorFunc = function (firstName, lastName, age) {
            this.firstName = firstName
            this.lastName = lastName
            this.age = age
        }

        return newConstructorFunc
    }

    @newConstructor
    class Human {
        constructor(firstName, lastName) {
            this.firstName = firstName;
            this.lastName = lastName;
        }
    }

    // Though Human class constructor function takes only two parameters, but due to
    // newConstructor now Human class can accept 3 parameters
    var person1 = new Human("Virat", "Kohli", 31);
    console.log(person1);

    // Displays the modified constructor function
    console.log(Human.prototype.constructor);
    console.log(person1.__proto__.constructor);
</script>

 <script class="static-script babel-standalone" src="https://fiddle.jshell.net/js/babel/babel.js" type="text/javascript"></script> <script type="text/jsx" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy"> // code which I want to compile and run using Babel-standalone console.log('Babel ===', Babel); function newConstructor(HumanClass) { // newConstructorFunc will modify or overwrite the HumanClass contructor function var newConstructorFunc = function (firstName, lastName, age) { this.firstName = firstName this.lastName = lastName this.age = age } return newConstructorFunc } @newConstructor class Human { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } } // Though Human class constructor function takes only two parameters, but due to // newConstructor now Human class can accept 3 parameters var person1 = new Human("Virat", "Kohli", 31); console.log(person1); // Displays the modified constructor function console.log(Human.prototype.constructor); console.log(person1.__proto__.constructor); </script>

Answer 1

I tried the same code with Babel standalone version 7.12.9, still getting below error.我在 Babel 独立版本 7.12.9 上尝试了相同的代码，但仍然低于错误。 I tried few options but was not able to make it work.我尝试了几个选项，但无法使其工作。 If any one can guide how to make it work.如果有人可以指导如何使其工作。 but it worked properly with Babel version 6.x.但它在 Babel 6.x 版中正常工作。

babel-standalone@7.12.9.js:65221 Uncaught Error: [BABEL] /Inline Babel script: The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option. (While processing: "base$0$0")

Reference link : https://babeljs.io/docs/en/babel-standalone参考链接： https : //babeljs.io/docs/en/babel-standalone

<script>
// Define a preset
Babel.registerPreset("env-plus", {
  presets: [
    [Babel.availablePresets["env"], { "loose": true }]
  ],
  plugins: [
    [
      Babel.availablePlugins["proposal-decorators"], { decoratorsBeforeExport: true }
    ]
  ],
});
</script>

<script type="text/babel" data-presets="env-plus"></script>

Then I tried Babel version 6.26.0, and it worked properly.然后我尝试了 Babel 6.26.0 版，它运行正常。 Please refer live example added here.请参考此处添加的实时示例。



  
 
  
   
    
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<script type="text/jsx" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy">
    // code which I want to compile and run using Babel-standalone
    console.log('Babel ===', Babel);

    function newConstructor(HumanClass) {
        // newConstructorFunc will modify or overwrite the HumanClass contructor function
        var newConstructorFunc = function (firstName, lastName, age) {
            this.firstName = firstName
            this.lastName = lastName
            this.age = age
        }

        return newConstructorFunc
    }

    @newConstructor
    class Human {
        constructor(firstName, lastName) {
            this.firstName = firstName;
            this.lastName = lastName;
        }
    }

    // Though Human class constructor function takes only two parameters, but due to
    // newConstructor now Human class can accept 3 parameters
    var person1 = new Human("Virat", "Kohli", 31);
    console.log(person1);

    // Displays the modified constructor function
    console.log(Human.prototype.constructor);
    console.log(person1.__proto__.constructor);
</script>

I hope this will be helpful.我希望这会有所帮助。

Thanks, Jignesh Raval谢谢，Jignesh Raval

Babel-Standalone 错误：内联 Babel 脚本：当前未启用对实验性语法“decorators-legacy”的支持 (14:1)：

问题描述

1 个解决方案

解决方案1
0 2020-12-04 16:35:20

Babel-Standalone 错误：内联 Babel 脚本：当前未启用对实验性语法“decorators-legacy”的支持 (14:1)：

问题描述

1 个解决方案

解决方案1 0 2020-12-04 16:35:20

解决方案1
0 2020-12-04 16:35:20