通过脚本标签加载Webpack捆绑包以实现微前端方法

编程问答 2022-06-21

问题描述

我正在关注几篇有关如何使用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();
};

一些示例存储库：

解决方法

您可以尝试使用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;
  }
};
javascriptmicro-frontendreactjsreactjswebpackwebpackwebpackwebpack-4