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功能編譯錯誤

回答

相關問題