Webpack babel-loader не разобрался arrow функция

Question

Я добавляю, что некоторые реагируют на существующий веб-сайт, и я пытаюсь настроить webpack и babel. Webpack работает правильно, когда я не пытаюсь включить функции стрелки или распространение. Когда я пытаюсь включить их, я получаю ошибку «неожиданного маркера». Я искал часы, поэтому любая помощь с этим была бы замечательной. Я нахожусь в Windows.

webpack.config.js

const webpack = require("webpack"); 
const path = require("path"); 

module.exports = { 
    entry: { 
     homeRefine: [path.join(__dirname, './js/react/src/home-refine.js')] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ["es2015", "react"] 
       } 
      } 
     ] 
    }, 
    output: { 
     filename: '[name].bundle.js', 
     path: path.join(__dirname, './js/react/dist') 
    } 
}; 

package.json

{ 
    "name": "blank", 
    "version": "1.0.0", 
    "devDependencies": { 
    "autoprefixer": "^6.3.7", 
    "babel-core": "^6.18.2", 
    "babel-loader": "^6.2.9", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "browser-sync": "^2.13.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-postcss": "^6.1.1", 
    "gulp-sass": "^2.3.2", 
    "gulp-sourcemaps": "^1.6.0", 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "webpack": "^1.14.0" 
    }, 
    "scripts": { 
    "pack": "webpack --config webpack.dev.config.js", 
    "watch": "webpack --watch --config webpack.dev.config.js", 
    "production": "webpack --config webpack.prod.config.js" 
    } 
} 

HomeSearchRefine.js

import React from 'react'; 

class HomeSearchRefine extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      arkona: "cag" 
     }; 
    } 

    componentWillMount() { 
     fetchCars(this.state.arkona); 
    } 

    fetchCars = (arkona) => { 
     console.log(arkona); 
    }; 

    render() { 
     return (
      <div className="search-filters"> 
       <p>Hello world</p> 
      </div> 
     ) 
    } 
} 

export default HomeSearchRefine; 

терминал вывод

C:\dev\websites\choice\Choice (homepage-react) (choice@1.0.0) 
λ npm run pack 

> choice@1.0.0 pack C:\dev\websites\choice\Choice 
> webpack --config webpack.dev.config.js 

Hash: 6dca2e265a78f9c74bb5 
Version: webpack 1.14.0 
Time: 2493ms 
       Asset Size Chunks    Chunk Names 
homeRefine.bundle.js 740 kB  0 [emitted] homeRefine 
    [0] multi homeRefine 28 bytes {0} [built] 
    + 179 hidden modules 

ERROR in ./js/react/src/components/HomeSearchRefine.js 
Module build failed: SyntaxError: C:/dev/websites/choice/Choice/js/react/src/components/HomeSearchRefine.js: Unexpected token (15:11) 

    13 | } 
    14 | 
> 15 | fetchCars = (arkona) => { 
    |   ^
    16 |   console.log(arkona); 
    17 | }; 
    18 | 

@ ./js/react/src/home-refine.js 9:24-64 

Answer 1

ES2015 поддерживает только методы, а не класс свойства класса. Итак:

class SomeClass { 
    // these are valid: 
    instanceMethod() { } 
    static classMethod() { } 

    // these are not valid: 
    someProperty = 3; 
    invalidMethod =() => { } 
    alsoInvalidMethod = function() { } 
} 

Если вы хотите, чтобы включить эту функцию (которая not yet standard), вы должны добавить transform-class-properties плагин для конфигурации Бабеля.

В качестве примечания, обратите внимание, что при использовании функции стрелок в классах таким образом, this внутри этой функции стрелка не будет ссылаться на экземпляр класса, но, как и со всеми другими стрелками функции, значение this родительской области.(Как прокомментировал @loganfsmyth, это не относится к свойствам класса.)

Answer 2

определяет fetchCars в компоненте, как этого

fetchCars(arkona) { 
    console.log(arkona); 
}