ES6 ön ayarları olan Webpack, ES6 sözdizimini anlamadı

Question

WebPack etkinleştirilmiş ES6 ile React için çok basit bir projem var. Bu benim WebPack yapılandırma dosyası neye benzediği:

module.exports = { 
    entry: './main.js', 
    output: { 
     path: './', 
     filename: 'index.js', 
    }, 
    devServer: { 
     inline: true, 
     port: 3333, 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
}; 

bazı class kullanarak bir bileşen ile kod beyan tepki ve bu bileşen içine biraz ok işlevi vardır sahiptir. Benim sayfayı çalıştırdığınızda, WebPack dev sunucusu aşağıdaki hata gösterir:

ERROR in ./App.js 
Module build failed: SyntaxError: C:/Users/Alex/src/todo/App.js: Unexpected token (23:12) 
    21 | }; 
    22 | 
> 23 | handleOpen =() => { 
    |   ^
    24 |   this.setState({open: true}); 
    25 | }; 
    26 | 

O Babel web sitesinde okuyarak, önceden ayarlanmış 'es2015' yeterli olmalı görünüyor. Bir şey mi eksik?

Answer 1

Bu sözdizimi, yazmak için hala 1. aşamada olan ES Class Fields & Static Properties proposal bölümünün bir parçasıdır, bu nedenle kullanmak için preset-stage-1 eklemeniz gerekir.

Eğer stage-0'ı kullanırsanız, ayrıca çalışır.

Alterantif olarak, yalnızca transform-class-properties plugin'u kullanabilirsiniz.