从热重新加载程序移动到办公室加载项中的反应刷新

Question

我正在尝试使用react refresh而不是react hot reloader，后者是yo office generator的标准设置。

我试着遵循这样的教程，但没有用。我的应用程序停止重新加载，或者我的开发服务器无法启动。当前提到的热重载程序主要在webpack.config.js和index.js文件中。这些文件基本上仍然与yo office generator中的文件相同

// index.js
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "@fluentui/font-icons-mdl2";
import * as React from "react";
import * as ReactDOM from "react-dom";
/* global document, Office, module, require */
initializeIcons();
let isOfficeInitialized = false;
const title = "Contoso Task Pane Add-in";
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component title={title} isOfficeInitialized={isOfficeInitialized} />
</AppContainer>,
document.getElementById("container")
);
};
/* Render application after Office initializes */
Office.onReady(() => {
isOfficeInitialized = true;
render(App);
});
/* Initial render showing a progress bar */
render(App);
if (module.hot) {
module.hot.accept("./components/App", () => {
const NextApp = require("./components/App").default;
render(NextApp);
});
}

webpack:

/* eslint-disable no-undef */
const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const urlDev = "https://localhost:3000/";
const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
async function getHttpsOptions() {
const httpsOptions = await devCerts.getHttpsServerOptions();
return { cacert: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
vendor: ["react", "react-dom", "core-js", "@fluentui/react"],
taskpane: ["react-hot-loader/patch", "./src/taskpane/index.js"],
commands: "./src/commands/commands.js",
},
output: {
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"],
},
module: {
rules: [
{
test: /.jsx?$/,
use: [
"react-hot-loader/webpack",
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
],
exclude: /node_modules/,
},
{
test: /.html$/,
exclude: /node_modules/,
use: "html-loader",
},
{
test: /.(png|jpg|jpeg|gif|ico)$/,
type: "asset/resource",
generator: {
filename: "assets/[name][ext][query]",
},
},
],
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "assets/*",
to: "assets/[name][ext][query]",
},
{
from: "manifest*.xml",
to: "[name]" + "[ext]",
transform(content) {
if (dev) {
return content;
} else {
return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
}
},
},
],
}),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["taskpane", "vendor", "polyfill"],
}),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["commands"],
}),
new webpack.ProvidePlugin({
Promise: ["es6-promise", "Promise"],
}),
],
devServer: {
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
},
https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
port: process.env.npm_package_config_dev_server_port || 3000,
},
};
return config;
};

我已经尝试过遵循前面提到的教程，但似乎没有找到完全迁移的方法。有人有主意吗？

Answer 1

尝试git-reo上的文档-https://github.com/pmmmwh/react-refresh-webpack-plugin

更新webpack-config以使用类似于以下代码的react刷新插件。

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
plugins: [dev && require.resolve('react-refresh/babel')].filter(Boolean),
},
},
],
},
],