Babel插件 - 提议装饰器未按预期工作

Question

我在我的程序中添加了这两个devDependencies package.json:

"@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所以observable是干净的语法,我的文件看起来像这样:

class AppStore {
  @observable username = ''
}

export default (new AppStore())

但它始终显示此错误:

我想我已经正确完成了,但无法检测babel插件是否已加载.

Answer 1

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

如果这没有帮助，问题可能来自于metro-react-native-babel-preset 已经包含类属性插件的事实，并且正如您所知，插件的顺序很重要，您需要让装饰器在类属性插件之前运行。

关于 babel 中的排序问题已经有很多讨论，尽管插件应该在预设之前运行，但这仍然是一个问题。不幸的是 PR #5735添加插件排序功能仍在进行中。

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

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