mobx + 反应意外令牌
mobx + react unexpected token
所以我从 https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
创建了一个没有配置的反应应用
我安装了 mobx 和 mobx-react,但是在@symb 之前仍然显示 unexpected token 的错误。
我需要添加其他东西吗,或者我当前的配置有误?:(
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"
},
.babelrc
{
"presets": ["es2015", "stage-0", "react"],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}
和代码
import React, { Component } from 'react';
import { action, observable } from 'mobx'
import {observer} from 'mobx-react';
class App {
@observer cake = [];
}
export default new App();
create-react-app does not support decorators (@
). You could either eject create-react-app to add it yourself, set up your own environment from scratch, or use something like mobx-react-boilerplate 作为起点。
我个人使用过 react-app-rewired with the mobx extension 非常成功。
您可以使用不使用装饰器的语法 (here and here)。
这是一个使用您提供的应用 class 代码的示例:
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();
您在 运行 npm run eject 之后缺少包(因为 create-react-app 不支持装饰器)。
运行 npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties
然后将以下 Babel 配置添加到您的 package.json
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},
所以我从 https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
创建了一个没有配置的反应应用我安装了 mobx 和 mobx-react,但是在@symb 之前仍然显示 unexpected token 的错误。
我需要添加其他东西吗,或者我当前的配置有误?:(
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"
},
.babelrc
{
"presets": ["es2015", "stage-0", "react"],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}
和代码
import React, { Component } from 'react';
import { action, observable } from 'mobx'
import {observer} from 'mobx-react';
class App {
@observer cake = [];
}
export default new App();
create-react-app does not support decorators (@
). You could either eject create-react-app to add it yourself, set up your own environment from scratch, or use something like mobx-react-boilerplate 作为起点。
我个人使用过 react-app-rewired with the mobx extension 非常成功。
您可以使用不使用装饰器的语法 (here and here)。
这是一个使用您提供的应用 class 代码的示例:
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();
您在 运行 npm run eject 之后缺少包(因为 create-react-app 不支持装饰器)。
运行 npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties
然后将以下 Babel 配置添加到您的 package.json
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},