Webpack使用反应状态抛出SyntaxError

Question

我正在尝试使用React（create-react-app）和Firebase来实现SSR。为此，我目前正在webpack和this tutorial之后进行github dir配置：

module.exports = [{
    entry: './src/index.js',
    module: {
        rules: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.(png|jpe?g|gif|svg|otf)$/i, loader: 'file-loader', exclude: /node_modules/},
        ]
    },
    output: {
        filename: 'public/bundle.js',
        path: __dirname
    }
}];

以某种方式反应状态，webpack返回以下错误：

SyntaxError: /Users/timfuhrmann/Documents/Entwicklung/React/auriga/src/shared/ImageHolder.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:11):

       5 | class LazyImage extends Component {
       6 | 
    >  7 |     state = {
         |           ^
       8 |         src: null,
       9 |         transition: false
      10 |     };

浏览网络时，我发现我需要安装plugin-proposal-class-properties-但是如何在webpack中进行配置？

通天塔：

"devDependencies": {
    "@babel/cli": "^7.7.7",
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.7.4",
    "css-loader": "^3.4.0",
    "express": "^4.17.1",
    "file-loader": "^5.0.2",
    "firebase-admin": "^8.9.0",
    "firebase-functions": "^3.3.0",
    "firebase-tools": "^7.11.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }


.babelrc:
{
  "presets":[
    "@babel/preset-env", "@babel/preset-react"
  ]
}

Answer 1

您只需要将其放入Babel插件中：

.babelrc：

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

来源：https://babeljs.io/docs/en/babel-plugin-proposal-class-properties