Webpack错误：意外的代币

Question

朋友！我无法使用webpack构建。 在的WebPack我用巴贝尔6^+这个预设：

presets: ['es2015', 'stage-1', 'react'] 

NPM开始后我赶上错误：

ERROR in ./src/common/components/layout/Header.js 
Module build failed: SyntaxError: C:/Users/Anton/projects/isomorphic-redux-app/src/common/components/layout/Header.js: Unexpected token (13:15) 
    11 | } 
    12 | 
    13 | handleToggle =() => this.setState({open: !this.state.open}); 
    |    ^
    14 | 
    15 | render() { 
    16 |  return (

起初我还以为我在代码中有错误，我只是复制/粘贴它来自Material-UI文档，但它也被打破了。 Header.js文件：

import React, { Component, PropTypes } from 'react'; 
import LeftNav from 'material-ui/lib/left-nav'; 
import AppBar from 'material-ui/lib/app-bar'; 
import RaisedButton from 'material-ui/lib/raised-button'; 

export default class Header extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {open: false}; 
    } 

    handleToggle =() => this.setState({open: !this.state.open}); 

    render() { 
    return (
     <div> 
     <RaisedButton 
      label="Controlled LeftNav That Opens From Right" 
      onTouchTap={this.handleToggle} /> 
     <LeftNav width={200} openRight={true} open={this.state.open} > 
      <AppBar title="AppBar"/> 
     </LeftNav> 
     </div> 
    ); 
    } 
} 

而且webpack.config：

var path = require('path'); 
var webpack = require('webpack'); 
var merge = require('merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 


var webpackConfig = { 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.NoErrorsPlugin() 
    ] 
}; 

if (process.env.NODE_ENV === 'production') { 

    webpackConfig = merge(webpackConfig,{ 
    devtool: "source-map", 
    entry : [ 
     './src/client/index.js' 
    ], 
    resolve: { 
     extensions: ["", ".js", ".jsx"] 
    }, 
    module: { 
    loaders: [{ 
    test: /\.js$/, 
    loader: 'babel', 
    exclude: /node_modules/, 
    include: __dirname, 
    query: { 
     presets: ['es2015', 'stage-1', 'react'], 

    } 
     }, 
     { 
     test: /\.jsx$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     include: __dirname, 
     query: { 
      presets: ['es2015', 'stage-1', 'react'], 

     } 
     }, 
     { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'}, 
     { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') } 
    ]}, 
    plugins : [ 
     new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: JSON.stringify('production') 
     } 
     }), 
     new ExtractTextPlugin("app.css"), 
     new webpack.optimize.UglifyJsPlugin({minimize: true}) 
    ] 
    }); 

}else{ 

    webpackConfig = merge(webpackConfig,{ 
    devtool: 'inline-source-map', 
    module: { 
     loaders: [{ 
    test: /\.js$/, 
    loader: 'babel', 
    exclude: /node_modules/, 
    include: __dirname, 
     env: { 
     development: { 
      plugins: [ 
      'react-transform' 
      ], 
      extra: { 
      'react-transform': { 
       transforms: [{ 
       transform: 'react-transform-hmr', 
       imports: ['react'], 
       locals: ['module'] 
       }, 
       { 
       transform: 'react-transform-catch-errors', 
       imports: ['react','redbox-react' ] 
       } 
      ]} 
      } 
     } 
     },// 
     query: { 
//   optional: ['runtime'], 
     presets: ['es2015', 'stage-1', 'react'], 

    } 
    }, 
    { 
    test: /\.jsx$/, 
    loader: 'babel', 
    exclude: /node_modules/, 
    include: __dirname, 
    env: { 
     development: { 
      plugins: [ 
      'react-transform' 
      ], 
      extra: { 
      'react-transform': { 
       transforms: [{ 
       transform: 'react-transform-hmr', 
       imports: ['react'], 
       locals: ['module'] 
       }, 
       { 
       transform: 'react-transform-catch-errors', 
       imports: ['react','redbox-react' ] 
       } 
      ]} 
      } 
     } 
     }, 
    query: { 
     presets: ['es2015', 'stage-1', 'react'], 

    } 
    }, 
    { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'}, 
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') } 
]}, 
entry : [ 
    'webpack-hot-middleware/client', 
    './src/client/index.js', 
], 
resolve: { 
    extensions: ["", ".js", ".jsx"] 
}, 
plugins : [ 
    new webpack.HotModuleReplacementPlugin(), 
    new ExtractTextPlugin("app.css") 
    ] 
    }); 

} 

module.exports = webpackConfig; 

我怎样才能解决这个问题？

Answer 1

，因为你要定义你不需要箭头功能（它是无效的语法）这里class方法：

handleToggle =() => this.setState({open: !this.state.open}); 

试试这个：

handleToggle() { this.setState({open: !this.state.open}); } 

但是，因为类方法不会自动绑定，所以您需要在构造函数中或在使用它时绑定它：

constructor(props) { 
    super(props); 
    this.state = {open: false}; 
    this.handleToggle = this.handleToggle.bind(this); 
    } 

如果你是render或其他类的方法里面，你需要添加const或等同于前（使用分配与=时）：

render() { 
    const handleToggle =() => this.setState({open: !this.state.open}); 
} 

Answer 2

您需要使用Babel阶段1来获取类属性。

http://babeljs.io/docs/plugins/preset-stage-1/

第1步：添加依赖关系如下：

npm install babel-preset-stage-1 --save 

第2步：改变.babelrc文件，如下所示：

{ 
    "presets": ["es2015", "react","stage-1"] 
} 

Answer 3

如果我是正确的，你想使用属性初始值设定项这是ES7功能。要解决这个问题，你必须使用stage-1预置。

更多信息here

Answer 4

如果你想使用箭头对一类和避免功能结合到构造（此位）：

this.handleToggle = this.handleToggle.bind(this); 

然后你才能在美国e巴贝尔的转换类属性。为此，请在您的命令行下载模块：

npm i --save babel-plugin-transform-class-properties 

然后在您的。babelrc：

{ 
    "plugins": ["transform-class-properties"] 
} 

然后你就可以使用更清晰的语法，并在构造函数中删除绑定：

handleToggle =() => this.setState({open: !this.state.open}); 

这应该是在0级或阶段1的预设，但我只有通过明确引用插件才能使其工作（如上所述）。