如何编译JSX服务器端

Question

我正在使用webpack编写一个简单的快速服务器，该服务器在服务器端呈现一个反应应用程序，但是我无法使用它来编译JSX。这是我运行webpack构建时看到的错误：

    ERROR in /src/components/Hello.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/xxx/Documents/xxxx/client/src/components/Hello.js: Unexpected token (5:11)

  3 | class Hello extends Component {
  4 |   render() {
> 5 |     return <h1>Hi</h1>
    |            ^
  6 |   }
  7 | }
  8 |

我已经安装了babel并做出反应，这是我的程序包依赖项：

 "dependencies": {
    "express": "^4.17.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-node-externals": "^1.7.2"
  }

这是我的.babelrc文件：

{
  'presets': ['@babel/preset-env', '@babel/preset-react']
}

这是我的webpack配置：

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  entry: {
    server: './server.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  externals: [nodeExternals()], // Need this to avoid error when working with Express
  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

如何获取我的JSX文件以与构建一起编译？

Answer 1