带有 babel 的装饰器，意外的令牌答案

【问题标题】：Decorators with babel, unexpected token带有 babel 的装饰器，意外的令牌
【发布时间】：2023-03-09 00:29:01
【问题描述】：

我正在尝试在 React 中的类上使用装饰器，使用 babelify。我在 babel 中应用了“es7.decorators”选项，但遇到“@”字符时，我不断收到“意外令牌”错误。

有人有什么想法吗？下面是一个简单的例子。

装饰者：

export default function(Component) {
  return class extends Component {
    constructor() {...}
  }
}

类：

import myDecorator from 'decorator';

@myDecorator
class MyClass{...}

我正在使用babelify（Babel 的浏览器转换）：

browserify().transform(babelify.configure({
  optional: ['es7.decorators']
})

【问题讨论】：

您究竟是如何启用可选的es7.decorators 转换器的？请提供您用于运行或编译 ES7 源代码的 .babelrc 文件和命令。
browserify(...).transform(babelify.configure({ optional: ['es7.decorators'] }) 我知道这是可行的，因为如果我在装饰器后添加分号，则会收到特定于装饰器的错误。
嗯，你的代码对我来说很好，所以你运行/编译它的方式有问题。

【解决方案1】：

万一其他人遇到这个问题，我也遇到了同样的问题。

我需要做的就是将 { "stage": 1 } 添加到我的 babelrc 中，它告诉 babel 使用实验功能进行编译，其中之一就是 es7 装饰器。

【讨论】：

从 v6 开始，这对于 babel 是正确的，我最初的问题是针对 v5。不过，现在看来您需要使用babel-plugin-transform-decorators-legacy 才能让它们工作，因为看起来装饰器支持已从舞台预设中移除（可能是错误的，但我必须添加插件才能让它们正常工作） .可能会帮助某人！
现在我们进入 bable 7，我又遇到了这个问题

【解决方案2】：

感谢@LeonidBeschastny 提到.babelrc 文件，使用配置文件装饰器正常工作，使用babelify 自述文件中描述的设置不起作用，无论出于何种原因（不确定是我的设置还是其他）。

【讨论】：