node.js - 如何编译 JSX 服务器端

Question

我正在使用 webpack 编写一个简单的 Express 服务器，它在服务器端呈现一个 React 应用程序，但我无法让它编译 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和react，这是我的包依赖项:

 "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 文件与构建一起编译？

更新

我发现问题是由于我的文件结构造成的 - 我有一个单独的客户端应用程序和一个单独的服务器应用程序，并且我正在尝试从客户端应用程序中提取“Hello”组件。

这是我的文件结构:

-/client
 -package.json
 -/src
  -/components
   -Hello.jsx
-/server
 -package.json
 -server.js

我正在我的 server.js 文件中导入 Hello 组件，如下所示:

import Hello from '../client/src/components/Hello.jsx';

我发现如果我将组件文件夹移动到/server 目录并更新导入路径，它就可以正常工作。

所以真正的问题是 - 如何导入位于项目根目录之外的组件？

Answer 1

在使用了您提供的存储库后，我能够让它工作。诀窍是摆脱 .babelrc 并将这些选项移至 webpack 配置中。

You can check out all the changes I made here

这是新的 webpack 配置

// file: /server/webpack.server.js

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

module.exports = {
  mode: 'development',
  entry: './server.js',

  target: 'node',

  externals: [nodeExternals()],

  output: {
    path: path.resolve('dist'),
    filename: 'server.js'
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: [
          path.resolve(__dirname),
          path.resolve(__dirname, "../client/src/components")
        ],
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          /* --------------- THIS IS WHAT I ADDED --------------- */
          options: {
            presets: [
              require.resolve('@babel/preset-react'),
              require.resolve('@babel/preset-env')
            ]
          }
          /* ---------------------------------------------------- */
        }
      }
    ]
  },

  resolve: {
    alias: {
      components: path.resolve(__dirname, "../client/src/components")
    }     
  }
};

<小时/><小时/>

工作!!!