通过脚本标签加载webpack打包文件以支持微前端方法

Question

通过脚本标签加载webpack打包文件以支持微前端方法

javascriptreactjswebpackwebpack-4micro-frontend

4

我正在跟随几篇有关使用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` 上的加载微前端的函数。当我在 dev server 中运行两个应用程序时，正确的函数在`window` 上可用且正常工作。但是，当我按照部署到实际服务器上的同样步骤（在运行 `npm run build` 后），来运行两个应用程序时，我没有把 `renderMicroApp` 函数放在 `window` 上，而是有一个名为 `webpackJsonpmicro-app` 的不同变量。

我发现这是由于 webpack 中的 `output.library` 选项和/或相关选项造成的。从 webpack 文档中得知：

``` output.jsonpFunction. string = 'webpackJsonp' 仅在 target 设置为 'web' 时使用，它会使用 JSONP 加载按需资源块。如果使用了 output.library 选项，库名称会自动与 output.jsonpFunction 的值连接起来。 ```

我基本上想要加载并评估打包/脚本，以便 `renderMicroApp` 函数在`window` 上可用，但是我对需要使其正常工作的 webpack 配置设置感到迷茫，因为有许多不同的选项组合。

供参考，我在微应用的 `config-overrides` 中使用以下配置（顶部是 `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 对象上：

window.renderMicroApp = (containerId, history) => {
  ReactDOM.render(<AppRoot />, document.getElementById(containerId));
  serviceWorker.unregister();
};

一些示例存储库：

注：存储库指 GitHub 等网站提供的代码托管仓库。

- Otto

无法加载图像和scss文件，有什么建议可以解决吗？ - Abdullah

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniele Ricci · 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;
  }
};