Babel plugin-proposal-decorators 没有按预期工作

Question

我在package.json 中添加了这两个 devDependencies：

"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.6",

在.babelrc 一个文件中，我已将它们添加为插件：

{
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

我正在使用 mobx，所以可以观察到干净的语法，我的文件如下所示：

class AppStore {
  @observable username = ''
}

export default (new AppStore())

但它总是显示这个错误：

我想我已经做对了，但是没有办法检测是否加载了 babel 插件。

Answer 1

首先，请确保您使用的是最新版本的 metro-react-native-babel-preset，他们仅在 9 天前发布了新的未成年人 0.50.0。

如果这没有帮助，则问题可能来自 metro-react-native-babel-preset already includes 类属性插件，并且您知道插件的顺序 matter，您需要让装饰器在类属性插件之前运行。

在 babel 中关于 ordering 这个主题已经有很多讨论了，虽然插件应该在预设之前运行，但它仍然是would be a problem。不幸的是 PR #5735 添加插件订购功能仍在进行中。

与此同时，您可以做的可能是创建自己的 metro-react-native-babel-preset 并在我指出的位置的类属性插件之前添加装饰器插件。您也可以尝试制作自己的 babel 预设，包括按正确顺序的两个插件，并将其添加到 Metro 之后，因为预设以相反的顺序加载，如here 所示，从后到前。

还值得一试的是使用yarn start --reset-cache 启动打包程序，这可能会解决由坏/过时的缓存引起的问题。