与 Typescript 热重载 IIS 网络服务器react

IT技术 c# asp.net reactjs typescript iis
2021-04-27 14:05:01

我想在使用 C# Web Api 后端在 TypeScript 中开发我的 React 应用程序时使用热重载。我使用 .Net 框架而不是 Core,所以我需要使用 IIS 或 IIS Express。我可以webpack dev server毫无问题地为前端进行热重载,但随后我无法访问 API 资源。我能做到吗?

1个回答

找到了一个解决方案,将其webpack dev server用作IIS 的反向代理

新产品管理:

npm install --save react-hot-loader@next

npm install webpack-dev-server --save-dev

webpack.config.js, proxy 是 IIS 运行的地方:

var webpack = require('webpack');
var path = require("path");
var proxy = 'localhost:61299';

module.exports = {
    entry: [
        // activate HMR for React
        'react-hot-loader/patch',

        // the entry point of our app
        './Scripts/src/index.tsx',
    ],
    //entry: "./Scripts/src/index.tsx",
    output: {
        filename: "./Scripts/dist/bundle.js",
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            //{ test: /\.tsx?$/, loader: "ts-loader" }
            { test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader'] }
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // enable HMR globally

        new webpack.NamedModulesPlugin(),
        // prints more readable module names in the browser console on HMR updates
    ],

    devServer: {
        proxy: {
            '*': {
                target: 'http://' + proxy,
            }
        },
        port: 8080,
        host: '0.0.0.0',
        hot: true,
    },
}

然后,我可以从项目根文件夹中使用以下命令启动 Web 服务器:node_modules\.bin\webpack-dev-server. 如果我然后访问http://localhost:8080/我有热重载,我仍然可以使用 C# web api,因为它将代理 IIS Express 在“ http://localhost:61299/