javascript - 通过微前端方法的脚本标签加载 webpack 包
问题描述
我正在关注几篇关于如何使用 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
。当我在开发服务器中运行这两个应用程序时,我有正确的功能window
并且它可以工作。当我按照相同的步骤将两个应用程序部署到真实服务器(运行后npm run build
)时,我没有 renderMicroApp
在我的.window
webpackJsonpmicro-app
我发现这是由于 webpack 文档中 webpack 中的 output.library 选项(和/或相关选项)造成的:
输出.jsonp函数。string = 'webpackJsonp' 仅在 target 设置为 'web' 时使用,它使用 JSONP 加载按需块。如果使用 output.library 选项,库名称会自动与 output.jsonpFunction 的值连接。
我基本上希望加载和评估捆绑/脚本,以便该renderMicroApp
功能在窗口上可用,但我不知道我需要哪些 webpack 设置才能使其工作,因为有很多不同的选项排列。
作为参考,我在微应用(atop 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.renderMicroApp = (containerId, history) => {
ReactDOM.render(<AppRoot />, document.getElementById(containerId));
serviceWorker.unregister();
};
一些示例回购:
解决方案
您可以尝试使用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;
}
};
推荐阅读
- php - Elasticsearch:如何在聚合中使用多个过滤器和计算?
- c# - C# 动态面板子面板-事件循环错误
- buildozer - 如何为本地目录中的包而不是 zip 文件 url 编写 python-for-android 配方?
- azure - Azure Cosmos DB - 如何使主要区域脱机并强制自动故障转移?
- flutter - Flutter 中的多个导航器导致弹出问题
- php - 会话未存储变量 PHP
- tensorflow - 用于切片的动态变量的 Keras 自定义损失
- r - R 在更改条形颜色时重新排序数据。我该如何防止这种情况?
- laravel - Laravel - 动态指定数据库连接
- c - 为什么我的 stderr 行在我的 stdout 行之后首先打印?