当前位置: 首页 > 面试题库 >

如何在带有装饰器的本机0.56(Babel 7)中使用Mobx

元俊雅
2023-03-14
问题内容

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

在0.55.4中,要为MOBX使用装饰器,我使用“ babel-plugin-transform-decorators-legacy”,但与Babel
7不兼容。

react-native版本:0.56.0 mobx版本:5.0.3 mobx反应版本: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 }]
  ]
}

但是在RELEASExCode崩溃时出现此错误:

babelHelpers.applyDecoratedDescriptor is not a function.

更新2,工作配置:

这是我的工作配置:

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);

问题答案:

好吧,我加入解决了所有的错误@babel/runtime,现在在应用的工作原理DEBUGRELEASE太。

这里是正确的配置:

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。



 类似资料:
  • 在MobX 中使用 ES.next 装饰器是可选的。本章节将解释如何(避免)使用它们。 使用装饰器的优势: 样板文件最小化,声明式代码。 易于使用和阅读。大多数 MobX 用户都在使用。 使用装饰器的劣势: ES.next 2阶段特性。 需要设置和编译,目前只有 Babel/Typescript 编译器支持。 启用装饰器 如果想使用装饰器,请按照以下步骤操作。 TypeScript 启用 tsco

  • 我有一个RESTAPI服务器,使用NestJS和typeorm,控制器上有CRUD装饰器。我有一个用户实体 我知道用户名也是主列(我有更多列),但我需要通过用户名和角色(或id)来识别用户 我还有另一个实体(家庭信息) 但是,当我试图获取所有家庭信息(localhost:3000/api/family info)时,会出现一个错误“column familyinfonentity.parent\u

  • 当我用SnapHelper将一个照片库实现为RecyclerView时,我有一个案例。有些照片(全屏宽度的照片)是“粘”在一起的。我想添加一些装饰,所以它在项目之间的空白,但只有当一个开始嘲笑否则我想要一张照片采取整个宽度。我试过: 在创建自定义装饰时,我设法将我的装饰画出屏幕,这样它就只显示在滚动上,但是当重写时,它是不可见的--隐藏在下一张照片下,而当我重写时,下一张照片的边缘在Divider

  • 问题内容: 我很好奇AngularJS中的装饰器到底是什么。除了AngularJS文档中的简短内容和youtube视频中的简短提及(尽管很有趣)之外,装饰者在线上没有太多信息。 正如Angular所说的那样,装饰器是: 装饰服务,允许装饰者截取服务实例的创建。返回的实例可以是原始实例,也可以是委派给原始实例的新实例。 我真的不知道这 意味着 什么,而且我不确定为什么要将这种逻辑与服务本身分开。例如

  • 问题内容: 考虑这个小例子: 哪个打印 为什么参数(应该是Test obj实例)没有作为第一个参数传递给装饰函数? 如果我手动进行操作,例如: 它按预期工作。但是,如果我必须事先知道某个函数是否装饰,它就破坏了装饰器的全部目的。这里的模式是什么,还是我误会了什么? 问题答案: tl; dr 您可以通过将类作为描述符并返回部分应用的函数来解决此问题,该函数从中应用对象作为参数之一,如下所示 实际问题

  • 问题内容: 问题是创建现有对象的动态增强版本。 我无法修改的。相反,我必须: 子类化 将现有对象包装在新对象中 将所有原始方法调用委托给包装的对象 实现另一个接口定义的所有方法 要添加到现有对象的接口是: 使用Byte Buddy,我设法继承了类并实现了我的接口。问题是委派给包装的对象。我发现做到这一点的唯一方法是使用反射速度太慢(我在应用程序上负担很重,性能至关重要)。 到目前为止,我的代码是: