mobx +는 반응 예기치 않은 토큰

Question

그래서 내가 mobx를 설치하고 mobx-반응 https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

에서 구성없이 반응하지만, 여전히 @의 SYMB 전에 예기치 않은 토큰 오류를 보여줍니다와 응용 프로그램을 만들었습니다.

내가 뭔가를 추가하거나 내 현재의 구성이 잘못해야합니까? :(

package.json

"devDependencies": { 
"react-scripts": "0.8.4", 
"babel-core": "^6.7.6", 
"babel-loader": "^6.2.4", 
"babel-preset-es2015": "^6.6.0", 
"babel-preset-react": "^6.5.0", 
"babel-preset-stage-0": "^6.5.0" 
}, 
"dependencies": { 
"autobind-decorator": "^1.3.4", 
"classnames": "^2.2.5", 
"lodash": "^4.15.0", 
"mobx": "^2.5.1", 
"mobx-react": "^3.5.5", 
"react": "^15.3.1", 
"react-dom": "^15.3.1", 
"validator": "^5.6.0" 
}, 

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

.babelrc 그리고 코드

import React, { Component } from 'react'; 
import { action, observable } from 'mobx' 
import {observer} from 'mobx-react'; 


class App { 
    @observer cake = []; 
} 

export default new App(); 

Answer 1

create-react-app은 데코레이터 (@)를 지원하지 않습니다. eject 직접 만들거나 직접 환경을 설정하거나 mobx-react-boilerplate 같은 것을 시작 지점으로 사용하여 create-react-app 중 하나를 사용할 수 있습니다.

나는 mobx extension와 함께 개인적으로 react-app-rewired을 사용했으며 큰 성공을 거뒀습니다.

Answer 2

데코레이터 (here 및 here)를 사용하지 않는 제공된 구문을 사용할 수 있습니다.

import React, { Component } from 'react'; 
import { action, extendObservable } from 'mobx' 
import {observer} from 'mobx-react'; 


class App { 
    constructor() { 
    extendObservable(this, { 
     cake = [], 
    }); 
    } 
} 

export default new App(); 

Answer 3

당신은 npm run eject를 실행 한 후 패키지를 누락 (로 만들-반응-응용 프로그램 장식을 지원하지 않습니다) :

다음은 제공되는 응용 프로그램의 클래스 코드를 사용하는 예제입니다. npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

실행이 그런 다음 package.json

"babel": { 
    "plugins": [ 
    "transform-decorators-legacy" 
    ], 
    "presets": [ 
    "react-app" 
    ] 
},