ES6デコレータを使用しているときに予期しないトークン '@'

Question

私はReactプロジェクトの設定をしています。私はそれにMobXを組み込もうとしています。

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

マイことで、私は私が次のエラーを取得するのにことを行うとデコレータは

@observable 

、すなわち使用する必要があります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を使うのが初めてだから、これはnewbyの質問かもしれません。しかし、オンラインでリサーチをした後、私は何かを見つけることができませんでした。 （これには 'transform-decorators-legacy' Babelプラグインのインストールが含まれます）。

Answer 1

私はこの問題があまりデコレータではなく、プロパティ初期化子の構文だと思います。それはおそらく同様に、この上で失敗します：

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

をそれらをサポートするために、あなたはtransform-class-propertiesプラグインを追加することができます

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

（およびそれに応じてのWebPACKの設定を更新する）

または使用それを含むバベルプリセット（stage-2、stage-1またはstage-0）。