javascript - 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，他们发布了一个新的次要版本 0.50.0 只有 9 天以前。

如果这没有帮助，问题可能出在 metro-react-native-babel-preset already includes类属性插件，以及插件的顺序 matter , 您需要在类属性插件之前运行装饰器。

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

同时您可以做的是 fork 您自己的 metro-react-native-babel-preset 并在我指向的位置的类属性插件之前添加装饰器插件。您也可以尝试制作自己的 babel 预设，包括以正确顺序排列的两个插件，并将其添加到 metro 插件之后，因为预设是以相反的顺序加载的，从最后到第一个，如所见 here .

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