通过微前端方法的脚本标签加载 webpack 包

Posted 2023-02-22

【中文标题】通过微前端方法的脚本标签加载 webpack 包

【英文标题】：Loading webpack bundle via script tag for microfrontend approach

【发布时间】：2020-12-30 08:25:53

【问题描述】：

我正在关注几篇关于如何使用 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 之后），而不是在我的window 上使用renderMicroApp 函数，我有一个不同的变量：webpackJsonpmicro-app。

我发现这是由于 webpack 文档中 webpack 中的 output.library 选项（和/或相关选项）：

输出.jsonp函数。 字符串 = 'webpackJsonp' 仅在目标设置为“web”时使用，它使用 JSONP 加载按需块。 如果使用 output.library 选项，库名称会自动与 output.jsonpFunction 的值连接。

我基本上希望加载和评估包/脚本，以便在窗口上可以使用 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();
;

一些示例代码库：

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

【参考方案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;
  
;

【讨论】：

所以你说的问题是函数名没有被保留？公共函数不应该始终保留函数名称吗？如果我像下面这样在窗口变量上放置一个函数，那不应该一直保留吗？： window.renderSubApp = (containerId, history) => ReactDOM.render(, document.getElementById(containerId)); serviceWorker.unregister(); ;