如何在带有装饰器的本机0.56(Babel 7)中使用Mobx [英] How to use mobx in react-native 0.56 (Babel 7) with Decorators

问题描述

我已将使用Babel 7的RN应用程序从0.55.4升级到0.56.

i've upgraded my RN app from 0.55.4 to 0.56 that use Babel 7.

在0.55.4中为MOBX使用装饰器时，我使用了"babel-plugin-transform-decorators-legacy"，但与Babel 7不兼容...

In 0.55.4 to use decorators for MOBX i use "babel-plugin-transform-decorators-legacy" but is not compatible with Babel 7...

本机版本:0.56.0 mobx版本:5.0.3 mobx反应版本:5.2.3

react-native ver: 0.56.0 mobx ver: 5.0.3 mobx-react ver: 5.2.3

有人解决吗?

谢谢

更新:

该应用程序在此配置下可以在DEBUG中运行

The app works in DEBUG with this configuration

package.json

package.json

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

.babelrc

.babelrc

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

但是在RELEASE xCode中，出现此错误:

But in RELEASE xCode crash with this error:

babelHelpers.applyDecoratedDescriptor is not a function.

更新2，工作配置:

这是我的工作配置:

package.json

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

.babelrc

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

然后在index.js(主应用程序起始文件)中，我需要导入装饰器babel库:

Then in the index.js (main app starting file) i need to import the decorators babel libraries:

index.js

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

app.js

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

AppRegistry.registerComponent(appName, () => AppName);

推荐答案

好吧，我通过添加@babel/runtime解决了所有错误，现在该应用程序也可以在DEBUG和RELEASE中使用.

Ok, i solved all the errors by adding @babel/runtime, now the app works in DEBUG and RELEASE too.

这里是正确的配置:

package.json

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

.babelrc

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

感谢@Hkan.

这篇关于如何在带有装饰器的本机0.56(Babel 7)中使用Mobx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！