Question

谢谢大家阅读我的问题。真的希望有一个解决方案，我一直试图找到一个解决方案几天无济于事。

以下是纲要：我的目标是使用.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];

以下是错误页面的屏幕截图：

窗口未定义（使用Asp.Net SPA服务进行服务器端渲染）

0 个答案: