web-dev-qa-db-fra.com

Comment faire fonctionner MobX Decorators avec Create-React-App v2?

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

J'ai essayé d'ajouter le plugin decorators-legacy babel et le @babel/plugin-proposal-decorators avec { legacy: true } dans .babelrc mais aucun effet. 

Quelqu'un a-t-il réussi à faire en sorte que les décorateurs de MobX travaillent avec CRA2?

reactjsdecoratorbabelcreate-react-appmobx
6
J. Reku

J'ai eu le même problème et j'ai fini par utiliser mobx4 où Les décorateurs peuvent être utilisés sans la syntaxe de décorateur.

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

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

peut être réécrit comme 

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

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

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

Vous pouvez utiliser cette fonctionnalité prête à l'emploi à partir de CRA2 sans avoir à vous soucier du plug-in de transformacy décoracy. Merci Michel Weststrate pour ce genre de choses

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

2
sumit

bien que d'autres réponses soient correctes si vous voulez éviter le code standard, il est possible d'utiliser des décorateurs dans CRA2 sans éjecter avec https://github.com/timarney/react-app-rewired/ et https: // github.com/arackaf/customize-cra

1
landbit

Lorsque vous utilisez CRA2, vous devez suivre les instructions suivantes pour utiliser MOBX5.

npm install -save mobx mobx-react

Ajoutez maintenant les lignes suivantes dans votre fichier de magasin.

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

Maintenant, vous pouvez utiliser quelque chose comme ça.

class Store {
  //...
}

decorate(Store, {
  list: observable
})

const appStore = new Store()`
1
Junaid Atique

J'ai fait un exemple de projet de React App 2.0 avec Bable 7 et Mobx (avec les travaux de décorateurs) sans éjecter! :

Liens que j'ai utilisés pour créer ce projet:

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

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

https://www.leighhalliday.com/mobx-create-react-app-without-ejecting

1
Almog_0

npm run eject

Ajoutez la ligne en gras à /config/webpack.config.dev.js autour de la ligne 162. Assurez-vous de faire de même sur /config/webpack.config.prod.js, sinon l’application ne sera pas construite.

plugins: ["@ babel/plugin-proposition-decorators", {"legacy": true}],

0
I.dev