web-dev-qa-db-ja.com

MobXデコレーターをCreate-React-App v2で動作させる方法は？

実験的な構文「decorators-legacy」のサポートは現在有効になっていません

decorators-legacy babelプラグインと@babel/plugin-proposal-decoratorsを{ legacy: true }とともに.babelrcに追加しようとしましたが、効果はありませんでした。

MobXデコレータをCRA2で動作させることができた人はいますか？

reactjsdecoratorbabelcreate-react-appmobx
11
J. Reku

まず、依存関係をインストールします。

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

次に、config-overrides.js次の内容のルートディレクトリ内：

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

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

これで、mobx +デコレータを使用できるはずです。

mobxがまだインストールされていない場合は、実行してください：yarn add mobx mobx-react。これで、デコレータを使用できます。

5
Daniel Kmak

同じ問題があり、mobx4を使用することになりましたデコレータ構文なしでデコレータを使用できます。

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

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

として書き換えることができます

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

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

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

この機能はCRA2からすぐに使用でき、変形装飾プラグインを心配する必要はありません。このようなことをしてくれたMichel Weststrateに感謝します

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

3
sumit

サンプルプロジェクト of React App 2.0とBabel 7およびMobx（デコレータが動作する）をイジェクトせずに行いました！：

このプロジェクトの作成に使用したリンク：

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

3
Almog_0

ボイラープレートコードを避けたい場合は他の答えは正しいですが、 https://github.com/timarney/react-app-rewired/ および https://github.com/arackaf/customize-cra

1
landbit

オプション1：CRA v2でデコレータを使用する

Mobx documentation を参照する場合、 TypeScript を使用してMobxデコレータをCRAv2で動作させることができます。

デコレータは、create-react-app @ ^ 2.1.1でTypeScriptを使用する場合に、すぐにサポートされます。

ただし、場合によっては、他の反応フレームワークでMobxを使用するときに問題が発生する可能性があります。その場合：

オプション2：デコレータを使用しない

詳細なステップバイステップガイドが文書化されています ここ 。

以前にオブザーバ反応コンポーネントを次のように定義した場合：

@observer
export default class MyComponent extends React.Component

次のように変更します。

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

export default MyComponent;

以前に持っていた場合：

@observable myElement = null;

次のように変更する必要があります。

myElement;

その後：

decorate(MyComponent, {
  myElement: observable,
})

お役に立てれば！

1
Arial

CRA2の使用中にMOBX5を使用するには、次の手順を実行する必要があります。

npm install -save mobx mobx-react

ストアファイルに次の行を追加します。

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

これで、このようなものを使用できます。

class Store {
  //...
}

decorate(Store, {
  list: observable
})

const appStore = new Store()`
1
Junaid Atique

npm run eject

/config/webpack.config.dev.jsの162行目付近に太字の行を追加します。/config/webpack.config.prod.jsでも同じことを行ってください。そうしないと、アプリはビルドされません。

プラグイン：["@ babel/plugin-proposal-decorators"、{"legacy"：true}]、

0
I.dev

babel7を使用する場合は、これらを行う必要があります。babelrcにいくつかの設定を追加する必要があります。デコレータのサポートをインストールします。そして、.babelrcファイルで有効にします：

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

または、次のようなMobX組み込みユーティリティを使用できます。

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

私は同じ問題を抱えていて、mobx-utilityを使用しましたが、すべてが完全に機能します

0
Zahra Hajilary