Неожиданный токен '@' при использовании декораторов ES6

Question

У меня есть проект проекта React, и я пытаюсь включить MobX в него. При том, что я должен использовать декоратор, т.е.

@observable 

Когда я делаю, что, хотя я получаю следующее сообщение об ошибке:

https://github.com/mobxjs/mobx

Module build failed: SyntaxError: Unexpected token (5:22)

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

Моего Webpack конфигурации:

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'] 
     }] 
    } 
}; 

Моих Конфигурация ESLint:

{ 
    "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, поэтому это может быть очень новым вопросом. Однако после проведения онлайн-исследований я не нашел ничего, что сработало. (Это включает в себя установку плагина Babel «transform-decorators-legacy».

Answer 1

Я думаю, что проблема заключается не столько в декораторе, сколько в синтаксисе инициализатора свойства. Это, вероятно, не в состоянии на это, а также:

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

Для поддержки тех, вы можете добавить transform-class-properties плагин:

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

(и обновить Webpack конфигурации соответственно)

Или использовать Babel, который включает его (stage-2, stage-1 или stage-0).