反应Webpack的“意外令牌"命名箭头功能 [英] React Webpack "unexpected token" named arrow function
问题描述
我已经使用webpack-middleware设置了反应全栈环境.我的代码中有一些es6语法,但是在没有构造函数或命名箭头功能的状态下出现错误.例如,我想使用语义UI来进行反应排序表: https://react.semantic-ui.com/collections/table# table-example-sortable 并且在编译时出现此错误: 在此处输入图片描述
I have set up react fullstack environment with webpack-middleware. I have some es6 syntax in my code but I get error while state without constructor or named arrow function. For example, I want to use semantic-ui for react sort table: https://react.semantic-ui.com/collections/table#table-example-sortable And while compiling I get this error: enter image description here
我以为是因为我在下面附加了错误的Webpack设置.
I thought it is because of wrong webpack setup I attached it below.
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"]
}
推荐答案
您正在尝试使用类属性,这些属性目前是类别字段投标.要立即使用它们,您必须安装 babel-plugin-transform-class-properties
.
You're trying to use class properties, which are currently stage 3 as part of the Class fields proposal. To be able to use them today, you have to install babel-plugin-transform-class-properties
.
npm install --save-dev babel-plugin-transform-class-properties
并将其添加到.babelrc
中的插件中.
And add it to your plugins in .babelrc
.
{
"presets": ["env", "react"],
"plugins": ["transform-class-properties"]
}
我还删除了es2015
预设,因为它已弃用了babel-preset-env
,而其中包含了es2015
所做的所有事情.
I also removed the es2015
preset since it has been deprecated in favour of babel-preset-env
, which contains everything es2015
does and more.
这篇关于反应Webpack的“意外令牌"命名箭头功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!