web-dev-qa-db-ja.com

デコレータを使用したreact-native 0.56（Babel 7）でmobxを使用する方法

babel 7を使用するRNアプリを0.55.4から0.56にアップグレードしました。

0.55.4でMOBXにデコレータを使用するには、「babel-plugin-transform-decorators-legacy」を使用しますが、Babel 7との互換性はありません...

反応ネイティブバージョン：0.56.0 mobxバージョン：5.0.3 mobx-reactバージョン：5.2.3

誰もが解決策を持っていますか？

ありがとう

更新：

アプリはこの構成でDEBUGで動作します

package.json

...
"devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47"
    ...
}

。babelrc

{
  "presets": [
    ["react-native"]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

しかし、RELEASEでは、このエラーでxCodeがクラッシュします。

babelHelpers.applyDecoratedDescriptor is not a function.

PDATE 2、WORKING CONFIG：

これは私の作業構成です：

package.json

...
"devDependencies": {
   "@babel/core": "7.0.0-beta.47",
   "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
   "@babel/runtime": "7.0.0-beta.47",
   "babel-jest": "23.2.0",
   "babel-preset-react-native": "5.0.2",
   "jest": "23.3.0",
   "react-test-renderer": "16.4.1"
}
...

。babelrc

{
  "presets": [
    ["react-native"]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

次に、index.js（メインアプリ開始ファイル）でデコレータのbabelライブラリをインポートする必要があります。

index.js

import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor';
import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty';

Object.assign(babelHelpers, {applyDecoratedDescriptor, initializerDefineProperty});

require('./app.js');

app.js

import {AppRegistry} from 'react-native';
import AppName from './app/index';

AppRegistry.registerComponent(appName, () => AppName);
reactjsreact-nativebabelmobx
14
Alessandro Bottamedi

わかりました、@babel/runtimeを追加することですべてのエラーを解決しました。アプリはDEBUGとRELEASEでも動作するようになりました。

ここで正しい構成：

package.json

...
"devDependencies": {
  "@babel/core": "7.0.0-beta.47",
  "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
  "@babel/plugin-transform-runtime": "7.0.0-beta.47",
  "@babel/runtime": "7.0.0-beta.47",
  "babel-jest": "23.2.0",
  "babel-preset-react-native": "5.0.2",
  "jest": "23.3.0",
  "react-test-renderer": "16.4.1"
}
...

。babelrc

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

ありがとう@Hkan。

11
Alessandro Bottamedi

@babel/[email protected]と@babel/[email protected]をインストールすることでこの問題を解決しました。

バージョンが変更される場合があります。 @babel/coreも7.0.0-beta.47にあったため、これらのバージョンを使用しました。

現在の.babelrcは：

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "polyfill": false,
      "regenerator": false
    }]
  ]
}
1
Hkan