我正在跟随几篇有关使用React实现简单微前端方法的文章(这里和这里,在问题底部可以看到示例库)。
当两个应用程序(根应用程序和子应用程序)在各自的开发服务器上运行时,它能够完美地工作。然而,当我将生成的构建文件部署到真实的Web服务器上时,它就无法正常工作了。这是根应用程序中重要的代码:
function MicroFrontend({name, host, history}) {
useEffect(() => {
const scriptId = `micro-frontend-script-${name}`;
const renderMicroFrontend = () => {
window["render" + name](name + "-container", history);
};
if (document.getElementById(scriptId)) {
renderMicroFrontend();
return;
}
fetch(`${host}/asset-manifest.json`)
.then((res) => res.json())
.then((manifest) => {
const script = document.createElement("script");
script.id = scriptId;
script.crossOrigin = "";
script.src = `${host}${manifest.files["main.js"]}`;
script.onload = () => {
renderMicroFrontend();
};
document.head.appendChild(script);
});
return () => {
window[`unmount${name}`] && window[`unmount${name}`](`${name}-container`);
};
});
return <main id={`${name}-container`}/>;
}
MicroFrontend.defaultProps = {
document,
window,
};
当我点击按钮加载微应用的 main.js 时,它一直顺利工作,直到调用上面的 `renderMicroFrontend` 后,我的浏览器报错: `Uncaught TypeError: window[("render" + t)] is not a function`。这是因为找不到应该在`window` 上的加载微前端的函数。当我在 dev server 中运行两个应用程序时,正确的函数在`window` 上可用且正常工作。但是,当我按照部署到实际服务器上的同样步骤(在运行 `npm run build` 后),来运行两个应用程序时,我没有把 `renderMicroApp` 函数放在 `window` 上,而是有一个名为 `webpackJsonpmicro-app` 的不同变量。
我发现这是由于 webpack 中的 `output.library` 选项和/或相关选项造成的。从 webpack 文档中得知:
``` output.jsonpFunction. string = 'webpackJsonp' 仅在 target 设置为 'web' 时使用,它会使用 JSONP 加载按需资源块。 如果使用了 output.library 选项,库名称会自动与 output.jsonpFunction 的值连接起来。 ```
我基本上想要加载并评估打包/脚本,以便 `renderMicroApp` 函数在`window` 上可用,但是我对需要使其正常工作的 webpack 配置设置感到迷茫,因为有许多不同的选项组合。
供参考,我在微应用的 `config-overrides` 中使用以下配置(顶部是 `react-app-rewired`):
module.exports = {
webpack: (config, env) => {
config.optimization.runtimeChunk = false;
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
config.output.filename = "static/js/[name].js";
config.plugins[5].options.filename = "static/css/[name].css";
config.plugins[5].options.moduleFilename = () => "static/css/main.css";
return config;
},
};
在我的 index.tsx 文件中(在微应用中),我将该函数暴露在 window 对象上:
window.renderMicroApp = (containerId, history) => {
ReactDOM.render(<AppRoot />, document.getElementById(containerId));
serviceWorker.unregister();
};
一些示例存储库:
- https://github.com/rehrumesh/react-microfrontend-container
- https://github.com/rehrumesh/react-microfrontend-container-cats-app.git
- https://github.com/rehrumesh/react-microfrontend-container-dogs-app
注:存储库指 GitHub 等网站提供的代码托管仓库。