React Webpack「意外令牌」名爲箭頭函數

我已經設置了與webpack-middleware反應的fullstack環境。我的代碼中有一些es6語法，但是在沒有構造函數或命名的箭頭函數的狀態下，我得到錯誤。例如，我想用語義UI的反應排序表： https://react.semantic-ui.com/collections/table#table-example-sortable 而在編譯時我得到這個錯誤： enter image description here React Webpack「意外令牌」名爲箭頭函數

我認爲這是因爲錯誤的WebPack設置我重視它下面的。

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './client/index.js', 
    output: { 
    path: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/, 
     exclude: /node_modules/ 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'client/index.html' 
    }) 
    ] 
};

.babelrc

{ 
    "presets": ["env", "react", "es2015"] 
}

來源

2017-10-16 Kamil Lewandowski

您能否包含導致問題的代碼（箭頭函數）？ –

重複[如何使用箭頭函數（公共類字段）作爲類方法？]（https://stackoverflow.com/q/31362292/218196） –

您使用的語法不是ES6。 –

您正在嘗試使用類屬性，這是目前階段3作爲Class fields proposal的一部分。爲了能夠今天使用它們，您必須安裝babel-plugin-transform-class-properties。

npm install --save-dev babel-plugin-transform-class-properties

並將其添加到您的插件.babelrc。

{ 
    "presets": ["env", "react"], 
    "plugins": ["transform-class-properties"] 
}

我也去掉了es2015預設的，因爲它有利於babel-preset-env，其中包含一切es2015做多的被棄用。

來源

2017-10-16 15:09:01

這些不是類字段，但它們是「胖箭頭」風格的方法？ – Jaxx

它們是類屬性，你只是碰巧給它分配了一個箭頭函數。你可以使用'hideFixedMenu = true'或其他任何東西來代替'true'。另見[babel-plugin-transform-class-properties'顯示的例子]（https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-class-properties#example）。 –

感謝您指出這一點，我今天學到了一些新東西。 – Jaxx

React Webpack「意外令牌」名爲箭頭函數

回答

相關問題