web-dev-qa-db-fra.com

Comment utiliser Mobx dans React-Native 0.56 (Babel 7) avec Decorators

j'ai mis à jour mon application RN de 0.55.4 à 0.56 qui utilise Babel 7.

Dans 0.55.4 pour utiliser les décorateurs pour MOBX, j'utilise "babel-plugin-transform-decorators-legacy" mais n'est pas compatible avec Babel 7 ...

réactif natif ver: 0.56.0 mobx ver: 5.0.3 mobx-react ver: 5.2.3

quelqu'un at-il la solution?

Merci

MISE À JOUR:

L'application fonctionne dans DEBUG avec cette configuration

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 }]
  ]
}

Mais dans RELEASE crash de xCode avec cette erreur:

babelHelpers.applyDecoratedDescriptor is not a function.

MISE À JOUR 2, CONFIGURATION DE TRAVAIL:

Voici ma configuration de travail:

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 }]
  ]
}

Ensuite, dans le fichier index.js (fichier de démarrage de l'application principale), j'ai besoin d'importer les bibliothèques babel des décorateurs:

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

Ok, j'ai résolu toutes les erreurs en ajoutant @babel/runtime, maintenant l'application fonctionne également dans DEBUG et RELEASE.

Voici la configuration correcte:

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
    }]
  ]
}

Merci @Hkan.

11
Alessandro Bottamedi

J'ai résolu ce problème en installant @babel/[email protected] et @babel/[email protected].

Les versions peuvent changer pour vous. J'ai utilisé ces versions parce que @babel/core était également à 7.0.0-beta.47.

Courant .babelrc est:

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