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);

我需要在Babel Standalone版本中使用一些插件的指導。 因為我已經創建了像 JsFiddle 這樣簡單的代碼編輯器/代碼游樂場來在瀏覽器中運行和執行一些代碼，比如 ES6 示例、React、RxJs 等。

因為這不是全棧編輯器。 我正在使用Babel Standalone 7.7版本，現在我試圖在該編輯器中運行一個 ES6 @decorator 示例，但出現以下錯誤。 我試圖通過互聯網搜索解決方案，但沒有得到任何正確示例的答案。

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

我找到了一個在 Babel Standalone 中使用預設和插件的例子： https : //jsfiddle.net/0n8w6zh9/

但不確定如何使用@decorator 插件。

下面是我的編輯器的簡化代碼：

<!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>

當我們選擇“Babel + JSX”選項時，相同的@decorator 示例在 JsFiddle 中工作： https ://jsfiddle.net/happyrupesh/j0v2c1r4/1/

不確定我做錯了什么或我的代碼中缺少什么。 請指導使用 Babel Standalone 在瀏覽器中使用 @decorator 函數。

謝謝，

吉涅什·拉瓦爾

工作解決方案：我也添加了代碼片段。

<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

我在 Babel 獨立版本 7.12.9 上嘗試了相同的代碼，但仍然低於錯誤。 我嘗試了幾個選項，但無法使其工作。 如果有人可以指導如何使其工作。 但它在 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")

參考鏈接： 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>

然后我嘗試了 Babel 6.26.0 版，它運行正常。 請參考此處添加的實時示例。



  
 
  
   
    
    <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>

我希望這會有所幫助。

謝謝，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