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的預設，但我只有通過明確引用插件才能使其工作（如上所述）。