我已经使用webpack-middleware建立了反应全栈环境。我的代码中有一些es6语法但是在没有构造函数或命名箭头函数的情况下我得到错误。例如,我想使用semantic-ui作为反应排序表: https://react.semantic-ui.com/collections/table#table-example-sortable 在编译时我收到此错误: enter image description here
我认为是因为我在下面附加了错误的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"]
}
答案 0 :(得分:8)
您正在尝试使用类属性,这些属性目前是第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
所做的所有内容。