Babel插件 - 提議裝飾器未按預期工作

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所以observable是干凈的語法，我的文件看起來像這樣：

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 已經包含了class屬性插件這一事實，並且你知道插件的順序很重要 ， 你需要有裝飾器在類屬性插件之前運行 。

關於babel的這個主題有很多討論，盡管插件應該在預設之前運行，但它仍然是個問題 。 不幸的是，添加插件訂購功能的PR ＃5735仍在進行中。

在此期間你可以做的就是分叉你自己的metro-react-native-babel-preset並在我指向的地方的類屬性插件之前添加裝飾器插件。 您也可以嘗試讓自己的通天預設，包括以正確的順序的兩個插件和地鐵相繼添加它，為預設以相反的順序加載，最后到第一所看到這里 。

另外值得一試的是使用yarn start --reset-cache啟動打包程序，這可能會解決由錯誤/過時緩存引起的問題。