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评论的那样,类属性不是这种情况.)