使用ES6装饰器时出现意外的标记“@”

我有一个React项目设置，我正在尝试将MobX纳入其中。 与此我必须使用装饰即

@observable 

当我这样做，虽然我得到以下错误：

https://github.com/mobxjs/mobx

模块构build失败：SyntaxError：意外的标记（5:22）

class ListStore {@observable items = ['Pete'，'John'，'Henry'，'Jeff'，'Bob']; }

我的Webpackconfiguration：

 module.exports = { entry: './src/App.js', output: { path: __dirname, filename: 'app.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'], plugins: ['transform-decorators-legacy'] } }, { test: /\.scss?$/, exclude: /node_modules/, loaders: ['style', 'css', 'sass'] }] } }; 

我的ESLintconfiguration：

 { "parserOptions": { "ecmaVersion": 6, "ecmaFeatures": { "jsx": true }, "sourceType": "module" }, "env": { "browser": true, "node": true, "es6": false }, "ecmaFeatures": { "modules": true }, "rules": { "strict": [ 2, "global" ], "quotes": [ 2, "single" ], "indent": [ 2, 4 ], "eqeqeq": [ 2, "smart" ], "semi": [ 2, "always" ], "max-depth": [ 2, 4 ], "max-statements": [ 2, 15 ], "complexity": [ 2, 5 ] } } 

作为一个说明，我是使用Webpack以及使用ESLint的新手，所以这可能是一个新的问题。 然而，在网上进行研究后，我还没有发现任何工作。 （这包括安装'转换 – 装饰者 – 传统'巴别卡插件）。

Answer 1

我认为问题不在于装饰器，而在于属性初始化器的语法。 这也可能会失败：

 class ListStore { items = ['Pete', 'John', 'Henry', 'Jeff', 'Bob'] } 

为了支持这些，你可以添加transform-class-properties插件：

 $ npm install babel-plugin-transform-class-properties --save 

（并相应地更新您的Webpackconfiguration）

或者使用包含它的Babel预设（ stage-2 ， stage-1或stage-0 ）。