it-swarm.com.de

Wie kann ich MobX Decorators dazu bringen, mit Create-React-App v2 zu arbeiten?

Support for the experimental syntax 'decorators-legacy' isn't currently enabled 

Ich habe versucht, das decorators-legacy babel-Plugin und @babel/plugin-proposal-decorators mit { legacy: true } in .babelrc, aber ohne Auswirkung hinzuzufügen. 

Hat es jemand geschafft, dass MobX-Dekorateure mit CRA2 arbeiten?

6
J. Reku

Installieren Sie zunächst Abhängigkeiten:

yarn add react-app-rewired customize-cra @babel/plugin-proposal-decorators

Zweitens, erstelle config-overrides.js im Stammverzeichnis mit folgendem Inhalt:

const {
    addDecoratorsLegacy,
    override,
    disableEsLint
} = require("customize-cra");

module.exports = {
    webpack: override(
        addDecoratorsLegacy(),
        disableEsLint()
    )
};

Sie sollten jetzt in der Lage sein, mobx + decorators zu verwenden.

Wenn Sie mobx noch nicht installiert haben, führen Sie bitte Folgendes aus: yarn add mobx mobx-react. Jetzt können Sie Dekorateure verwenden.

5
Daniel Kmak

Ich hatte dasselbe Problem und endete mit mobx4, wo Decorators ohne Dekoratorsyntax verwendet werden können.

class Store {
  //...
  @action empty() {
    this.data = []
  }

  @action add(e) {
    this.data.Push(e)
  }
}

kann als neu geschrieben werden 

class Store {
      //...
       empty() {
        this.data = []
      }

      add(e) {
        this.data.Push(e)
      }
    }

decorate(Store, {
  add: action,
  empty: action
})

Sie können diese Funktion direkt von CRA2 aus verwenden und müssen sich keine Gedanken um das Dekorations-Plugin machen. Danke Michel Weststrate für dieses Zeug

https://medium.com/@mweststrate/mobx-4-better-simpler-faster-smaller-c1fbc08008da

2
sumit

andere Antworten sind zwar korrekt, wenn Sie Boilerplate-Code vermeiden möchten. Es ist möglich, Dekoratoren in CRA2 zu verwenden, ohne https://github.com/timarney/react-app-rewired/ und https: // github.com/arackaf/customize-cra

1
landbit

Option 1: Verwenden von Dekoratoren mit CRA v2

Wenn Sie sich auf Mobx-Dokumentation beziehen, können Sie Mobx-Dekoratoren dazu bringen, mit CRAv2 zu arbeiten, indem Sie TypeScript verwenden:

Dekoratoren werden nur von Haus aus unterstützt, wenn TypeScript in [email protected]^2.1.1 verwendet wird.

In einigen Fällen können jedoch weiterhin Probleme auftreten, wenn Sie Mobx mit anderen Reaktions-Frameworks verwenden. In diesem Fall:

Option 2: Keine Dekorateure verwenden

Eine detaillierte Schritt-für-Schritt-Anleitung ist dokumentiert hier .

Wenn Sie zuvor Ihre Beobachterreaktionskomponente definiert haben als:

@observer
export default class MyComponent extends React.Component

Ändern Sie es in:

const MyComponent = observer(class MyComponent extends React.Component{
  /* ... */
});

export default MyComponent;

Wenn Sie vorher hatten:

@observable myElement = null;

Sie müssen es ändern in:

myElement;

dann:

decorate(MyComponent, {
  myElement: observable,
})

Hoffe das hilft!

1
Arial

Bei der Verwendung von CRA2 müssen Sie folgende Schritte ausführen, um MOBX5 verwenden zu können.

npm install -save mobx mobx-react

Fügen Sie nun folgende Zeilen in Ihre Ablagedatei ein.

import {decorate, observable} from "mobx"
import {observer} from "mobx-react"

Jetzt kannst du so etwas verwenden.

class Store {
  //...
}

decorate(Store, {
  list: observable
})

const appStore = new Store()`
1
Junaid Atique

Ich habe ein Beispielprojekt von React App 2.0 mit Bable 7 und Mobx (mit Dekorateuren funktioniert) ohne Auswurf! :

Links, mit denen ich dieses Projekt erstellt habe:

https://github.com/timarney/react-app-rewired/issues/348

https://github.com/arackaf/customize-cra#addbabelpluginsplugins

https://www.leighhalliday.com/mobx-create-react-app-ohne- Auswerfen

1
Almog_0

npm run eject ausführen

Fügen Sie die fette Linie in /config/webpack.config.dev.js in Zeile 162 hinzu. Stellen Sie sicher, dass Sie dies auch in /config/webpack.config.prod.js tun

plugins: ["@Babel/Plugin-Proposal-Decorators", {"Legacy": true}],

0
I.dev

sie sollten dies tun, wenn Sie babel7 verwenden. Sie müssen eine Konfiguration in babelrc hinzufügen. Installieren Sie die Unterstützung für Dekoratoren: npm i --save-dev @ babel/plugin-proposal-class-properties @ babel/plugin-proposal-decorators. Und aktivieren Sie es in Ihrer .babelrc-Datei:

    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

oder Sie können das in MobX integrierte Dienstprogramm wie folgt verwenden:

import { observable, computed, action, decorate } from "mobx";

class Timer {
  start = Date.now();
  current = Date.now();

  get elapsedTime() {
    return this.current - this.start + "milliseconds";
  }

  tick() {
    this.current = Date.now();
  }
}
decorate(Timer, {
  start: observable,
  current: observable,
  elapsedTime: computed,
  tick: action
});

Ich hatte das gleiche Problem und ich habe mobx-utility verwendet und alles hat für mich völlig funktioniert

0
Zahra Hajilary