MobX装饰器无法正常工作

Question

我无法使装饰器（如@observable和@computed）在我的项目中工作。

这是我的文件。

的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"] 
} 

当我加入@Observer装饰像这样（@Observer类应用扩展组件{...}）在我的类声明之前我收到此错误：

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

看起来像你使用create-react-app并没有使eject。为了使用装饰器，你应该做到这一点。或者使用custom-react-scripts作为替代。

Answer 2

当您使用create-react-app时，安装mobx的正确方法如下;

1. create-react-app ExampleApp
2. npm run eject
3. npm install --saveDev babel-plugin-transform-decorators-legacy
4. 更新您的.babelrc文件，因为它是现在（与变换装饰遗留）
5. npm install --save mobx mobx-react

这应该做的招。