Webpack 错误：意外的令牌

Question

朋友们！我在构建 webpack 时遇到问题。 在 webpack 我使用 babel 6^ + 这个预设：

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

npm start 后我发现错误：

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

如果你想在一个类上使用箭头函数并且避免绑定到构造函数（这个位）：

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

然后就可以使用 babel 的 transform 类属性了。为此，请在命令行中下载模块：

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

然后在你的 .babelrc 中：

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

然后你可以使用更简洁的语法并在构造函数中移除绑定：

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

这应该在 stage-0 或 stage-1 预设中，但我只是通过显式引用插件（如上）设法使其工作。

Answer 3

如果我是正确的，您正在尝试使用 ES7 特性的属性初始化程序。要解决此问题，您必须使用 stage-1 预设。

更多信息here

Answer 4

你需要使用 Babel stage 1 来获取类属性。

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

第一步：添加依赖如下：

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

第二步：修改.babelrc文件如下：

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