ES6 Arrow功能编译错误

如预期，但应该看各地的网络示例此代码不能编译。ES6 Arrow功能编译错误

ERROR in ./src/main/javascript/app.js 
Module build failed: SyntaxError: Unexpected token (66:18) 

    64 |  } 
    65 | 
> 66 |  addErrorAlert = (title, message) => { 
    |     ^
    67 |   this.state.toastContainer.error(
    68 |    message, 
    69 |    title,

所讨论的方法，它实际上是延伸React.Component

一个EM6类的一部分

addErrorAlert = (title, message) => { 
    this.state.toastContainer.error(
     message, 
     title, 
     { 
      timeOut: 10000, 
      extendedTimeOut: 10000, 
      preventDuplicates: true, 
      positionClass: "toast-bottom-full-width", 
      showMethod: "fadeIn", 
      hideMethod: "fadeOut" 
     } 
    ); 
};

的WebPack配置

var path = require('path'); 

var node_dir = __dirname + '/node_modules'; 

module.exports = { 
    entry: './src/main/javascript/app.js', 
    devtool: 'sourcemaps', 
    cache: true, 
    debug: true, 
    resolve: { 
     alias: { 
      'stompjs': node_dir + '/stompjs/lib/stomp.js', 
     } 
    }, 
    output: { 
     path: __dirname, 
     filename: './src/main/resources/static/built/bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: path.join(__dirname, '.'), 
       exclude: /(node_modules)/, 
       loader: 'babel-loader', 
       query: { 
        cacheDirectory: true, 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
};

来源

2017-02-23 greyfox

'addErrorAlert'函数是否应该返回任何东西或者是一个动作？ –

这只是一个动作，但我可能需要更新的状态。我认为箭头函数是一种避免this.method = this.method.bind（this）的方法，因为这会在一段时间后变得令人讨厌 – greyfox

此功能（class properties）仍是实验性的功能不包括在React和ES2015预设中。

要与巴贝尔transpile它，你需要在巴贝尔配置相关的变换。

UPDATE：这里是你如何启用它：首先，安装NPM包babel-plugin-transform-class-properties和改变你的WebPack配置到：

query: { 
    cacheDirectory: true, 
    presets: ['es2015', 'react'], 
    plugins: ['transform-class-properties'] 
}

来源

2017-02-23 17:33:57 Lucas

通过用户链接并且基本上说，“阅读这个”。试着在这里解释它OP –

@m_callens我不认为我应该链接现场的安装步骤，他们已经很清楚了。我清楚地回答说，这个功能并没有包括在他使用的预设中，并没有简单地说“读这个”。 – Lucas

是也许，但没有提供解决方案。 –

您需要启用class properties，这是不ES6的一部分。

presets: ['es2015', 'react'], 
plugins: ['transform-class-properties']

或者你也可以在构造函数中指定属性。

constructor(props, context) { 
    super(props, context); 
    this.addErrorAlert =() => { } 
}

来源

2017-02-23 17:37:12 Aaron

ES6 Arrow功能编译错误

回答

相关问题