Webpack babel-loader无法解析箭头功能

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() { }
}

如果要启用此功能（ 尚不标准 ），则应将transform-class-properties插件添加到Babel配置中。

作为附带说明，请注意，当以这种方式在类中使用箭头函数时， this箭头函数内部的该引用将不会引用该类的实例，而是（与所有其他箭头函数一样）该父作用域的this值。 （如@loganfsmyth所评论，类属性不是这种情况。）

Answer 2

像这样在您的组件中定义fetchCars

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