0

谢谢你们阅读我的问题。真的希望能解决这个问题，我几天来一直试图找到解决方法，但无济于事。

下面是概要：我的目标是使用 .NET Core 在服务器端呈现 React 应用程序。我什至还没有开始使用 react 部分，现在我只是尝试使用 ASP.NET Javascript Services Prerendering 功能呈现一个 h1 标记。

在我的第一次迭代中，我用 es5 编写了我的 boot-server.js 文件，它运行良好。然而，我很快意识到我需要通过 webpack 编译文件，以便它理解我的 React 代码。

不过，当我通过 webpack 传输该文件时，我得到了一个“未定义窗口”错误，我无法修复该错误。我知道我的应用程序的一部分不应该知道窗口对象，因为它存在于服务器中，但是将 webpack 配置的目标字段设置为节点似乎并不能解决问题。以下是所有涉及的文件。

这是我的 boot-server.js 文件：

import { createServerRenderer } from 'aspnet-prerendering';

module.exports = createServerRenderer((params) => {
    return new Promise((resolve, reject) => {
        var html = '<h1>Hello world!</h1>';
        resolve({
            html: html
        });
    });
});

这是我的cshtml视图：

@addTagHelper "*, Microsoft.AspNetCore.SpaServices"

<app id="root" asp-prerender-module="wwwroot/client/boot-server.bundle">Loading...</app>

这是我的 webpack.config.js 文件：

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

const clientConfig = {
  entry: './FrontEnd/index.js',
  output: {
    path: path.resolve(__dirname, "wwwroot/client"),
    filename: "client.min.js",
    publicPath: "/client/"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["es2015", "react", "stage-0"],
            plugins: ["transform-class-properties", "transform-decorators-legacy", "react-html-attrs"]
          }
        }
      },
      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader?name=[name]_[hash:8].[ext]'
        ]
      }
    ]
  },
  mode: 'development',
  devServer: {
    contentBase: './wwwroot/client',
    hot: true
  }
};

const bootServerConfig = {
  stats: { modules: false },
  resolve: { extensions: ['.js'] },
  output: {
      filename: '[name].js',
      publicPath: '/wwwroot/client/', // Webpack dev middleware, if enabled, handles requests for this URL prefix
      libraryTarget: 'commonjs'
  },
  entry: {
    'main-server': './FrontEnd/boot-server.js'
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            include: /FrontEnd/,
            use: [
                {
                  loader: "babel-loader",
                  options: {
                    presets: ["es2015", "react", "stage-0"],
                    plugins: ["transform-class-properties", "transform-decorators-legacy", "react-html-attrs"]
                  }
                }
            ]
        },
        {
            test: /\.svg$/,
            use: {
                loader: 'url-loader',
                options: { limit: 25000 } //?limit=100000'
            }
        }
    ]
    },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './wwwroot/client')
    },
    target: 'node'
}

module.exports = [clientConfig, bootServerConfig];

这是错误页面的屏幕截图： 错误页面

4

0 回答 0