javascript - 通过脚本标签加载 webpack 包用于微前端方法

Question

我正在关注几篇关于如何使用 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 文档中的 output.library 选项(和/或相关选项)造成的:

output.jsonpFunction. string = 'webpackJsonp' Only used when target is set to 'web', which uses JSONP for loading on-demand chunks. If using the output.library option, the library name is automatically concatenated with output.jsonpFunction's value.

我基本上希望加载和评估包/脚本，以便 renderMicroApp功能在窗口上可用，但我不知道我需要哪些 webpack 设置才能使其工作，因为有很多不同的选项排列。
作为引用，我在微应用程序中使用以下配置覆盖(在 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();
};

一些示例 repo :

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

Answer 1

你可以试试 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;
  }
};