Как заставить декораторы MobX работать с Create-React-App v2?

Question

Поддержка экспериментального синтаксиса 'decorators-legacy' в настоящее время не включена

Я попытался добавить плагин decorators-legacy babel и @babel/plugin-proposal-decorators с { legacy: true } в .babelrc но без эффекта.

Кому-нибудь удалось заставить декораторы MobX работать с CRA2?

Answer 1

Вариант 1. Использование декораторов с CRA v2

Если вы ссылаетесь на документацию Mobx , вы можете заставить декораторы Mobx работать с CRAv2, используя Typescript :

Декораторы поддерживаются "из коробки" только при использовании TypeScript в create-react-app@^2.1.1.

Однако в некоторых случаях вы можете столкнуться с проблемами при использовании 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,
})

Надеюсь, это поможет!

Answer 2

Во-первых, установите зависимости:

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 + decorators.

Если у вас еще не установлен mobx, пожалуйста, запустите: yarn add mobx mobx-react.Теперь вы можете использовать декораторы.

Answer 3

вы должны сделать это, если вы используете babel7, вам нужно добавить некоторые настройки в babelrc. Установка поддержки для декораторов: npm i --save-dev @ babel / plugin-offer-class-properties @ babel / plugin-offer-decorators.И включите его в вашем файле .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 и каждыйвещь полностью работает для меня

Answer 4

Я сделал пример проекта 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

Answer 5

, хотя другие ответы верны, если вы хотите избежать стандартного кода, в CRA2 можно использовать декораторы без извлечения, используя https://github.com/timarney/react-app-rewired/ и https://github.com/arackaf/customize-cra

Answer 6

При использовании 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()`

Answer 7

У меня возникла та же проблема, и в итоге я использовал 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, и вам не нужно беспокоиться о плагине для преобразования декораций.Спасибо Мишелю Вестстрату за этот материал

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

Answer 8

npm run eject

Добавьте жирную строку в /config/webpack.config.dev.js в строке 162. Убедитесь в том, чтобы сделать то же самое в /config/webpack.config.prod.js, иначеприложение не будет создавать

плагины: ["@ babel / plugin-offer-decorators", {"legacy": true}],