带有 React 的 asp.net 核心中的 HMR答案

【问题标题】：HMR in asp.net core with React带有 React 的 asp.net 核心中的 HMR
【发布时间】：2019-01-26 01:28:18
【问题描述】：

我使用 .net core cli 开始了我的项目。

dotnet new react -o my app

为了开发，我改变了我的环境变量

export ASPNETCORE_Environment=Development

我对 Typescript 不是很满意，所以我更喜欢使用 .jsx 文件和 babel，所以我决定更改我的 webpack.config.js。在模块规则中，我添加了：

const BABEL_LOADER_PLUGINS = [
  require.resolve("babel-plugin-transform-class-properties"),
  require.resolve("babel-plugin-transform-object-rest-spread"),
  require.resolve("babel-plugin-transform-regenerator")
];

/*...webpack config code ... */

{
      test: /\.jsx$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            presets: ["env", "react"],
            plugins: BABEL_LOADER_PLUGINS
          }
        }
      ]
    }

我用 .jsx 扩展名做了我的新组件，它可以工作。所以我的下一步是做 HMR 工作。在我的 Startup.cs 中：

if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }

在客户端的根组件中，使用 react-hot-loader'：

let HotApp;
if (__CONFIGS__.isDevServer) {
  const { hot } = require('react-hot-loader');
  HotApp = hot(module)(App);
} else {
  HotApp = App;
}

const Root = (
  <Provider store={store}>
    <BrowserRouter>
      <HotApp />
    </BrowserRouter>
  </Provider>
);

水合物（根，document.getElementById（'react-app'））；

这有时会奏效。在控制台中，我可以看到 [HMR] 已连接和更新。如果我停止该过程，控制台可能会显示 [HMR] 已连接，但如果我对组件进行一些更改，则不会发生任何事情。我不知道为什么有时效果很好。

【问题讨论】：

标签： asp.net reactjs webpack

【解决方案1】：

我们可以使用Create React App Configuration Override (@craco/craco) 和craco-plugin-react-hot-reload CRACO 插件来添加HMR，而不会弹出CRA 应用程序。

按照installation guide 安装@craco/craco
安装craco-plugin-react-hot-reload
```
npm i -D craco-plugin-react-hot-reload
```

将craco-plugin-react-hot-reload 添加到craco.config.js

const reactHotReloadPlugin = require('craco-plugin-react-hot-reload');

module.exports = {
  plugins: [{
    plugin: reactHotReloadPlugin
  }],
  webpack: [...]
}

安装@hot-loader/react-dom
```
npm i @hot-loader/react-dom
```

将您的App 组件标记为热导出（到ClientApp\src\App.js）

import { hot } from 'react-hot-loader/root';

function App() {...}

export default hot(App);

现在，当我们使用dotnet run 启动项目时，HMR 将正常工作。

使用 React 16.13.1 测试（2020 年 5 月）。 react、react-dom 和 @hot-loader/react-dom (16.13.x) 必须使用相同的主要和次要版本。

【讨论】：