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示例，但出现以下错误。我试图通过Internet搜索解决方案，但没有给出正确示例的答案。

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函数。

谢谢

Jignesh Raval

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 个答案: