如何解决通过脚本标签加载Webpack捆绑包以实现微前端方法
我正在关注几篇有关如何使用React实现简单的微前端方法的文章(here和here,请参阅问题底部的示例存储库)。
当两个应用程序(根应用程序和子应用程序)分别在各自的开发服务器中运行时,它可以完美工作。但是,当我将构建工件部署到真正的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
上的微前端的函数。当我在开发服务器上运行两个应用程序时,我在window
上具有正确的功能并且可以正常工作。当我将两个应用程序部署到真实服务器(运行npm run build
之后,执行相同的步骤时,不是在我的renderMicroApp
上使用window
函数,而是使用另一个变量: webpackJsonpmicro-app
。
我发现这是由于webpack文档中的webpack中的output.library选项(和/或相关选项)引起的:
output.jsonpFunction。 字符串='webpackJsonp' 仅在将target设置为“ web”(使用JSONP加载按需块)时使用。 如果使用output.library选项,则库名称将自动与output.jsonpFunction的值连接。
我基本上希望加载并评估包/脚本,以便在窗口上可以使用renderMicroApp
函数,但是我对实现此功能所需的Webpack设置迷失了,因为有选项的许多不同排列。
作为参考,我在微型应用程序中(react-app-rewired
上方)使用以下config-override:
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.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
解决方法
您可以尝试使用terser-webpack-plugin。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
webpack: (config,env) => {
config.optimization.minimize = true;
config.optimization.minimizer = [new TerserPlugin({
terserOptions: { keep_fnames: true }
})];
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;
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。