MobX Decorators funktioniert nicht

Question

Ich habe Probleme, Dekoratoren wie @observable und @computed in meinem Projekt zu arbeiten.

Hier sind meine Dateien.

package.json:

{ 
    "name": "heroku-react", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "babel-plugin-syntax-decorators": "^6.13.0", 
    "mobx": "^3.1.11", 
    "mobx-react": "^4.2.1", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-preset-stage-1": "^6.24.1", 
    "react-scripts": "1.0.7" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

App.js:

import React, { Component } from 'react'; 
import './App.css'; 
import GameBoard from './components/game-board'; 
import { inject, observer } from 'mobx-react'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
     </div> 
     <GameBoard /> 
     </div> 
    ); 
    } 
} 

export default App; 

.babelrc:

{ 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-1" 
    ], 
    "plugins": ["transform-decorators-legacy"] 
} 

Als ich fügen Sie den @observer Dekorateur wie so (@observer Klasse App erweitert Komponente {...}) vor meiner Klassendeklaration Ich erhalte diesen Fehler:

Failed to compile 
./src/App.js 
Syntax error: Unexpected token (7:0) 

    5 | import { inject, observer } from 'mobx-react'; 
    6 | 
> 7 | @observer class App extends Component { 
    |^
    8 | render() { 
    9 |  return (
    10 |  <div className="App"> 

Answer 1

Sieht aus, als ob Sie create-react-app verwenden und eject nicht gemacht haben. Um Dekorateure zu verwenden, sollten Sie es schaffen. Oder verwenden Sie custom-react-scripts als Alternative.

Answer 2

Die richtige Art der Installation von Mobx, wenn Sie create-react-app verwenden, ist wie folgt;

1. create-react-app ExampleApp
2. npm run eject
3. npm install --saveDev babel-plugin-transform-decorators-legacy
4. Aktualisieren Sie Ihre .babelrc Datei, wie es jetzt ist (mit transformations Dekorateure-legacy)
5. npm install --save mobx mobx-react

Das ist das tun sollten Trick.