使用Webpack，如何动态加载使用另一个Webpack构建的外部模块？

Question

假设我管理两个使用Webpack构建的JavaScript项目：一个名为User-Website的网站和一个叫做External-Module的JavaScript模块。

请注意，我出于微前端架构中描述的同样原因而使用了两个分开的项目。

我希望我的User-Website能够在需要时动态加载External-Module（使用任何JavaScript模块技术）。我的User-Website在构建时知道如何到达External-Module的URL。

我可以在User-Website和External-Module上选择任何所需的技术。

我正在寻找一种解决方案：

• 这很容易实现（也许是Webpack已经处理的JSONP来动态加载块？）
• 这不会给用户网站和外部模块增加太多负担（例如JavaScript模块看起来不错，但需要大量填充）

我的问题与https://github.com/webpack/webpack/issues/7526有关。

---

我尝试使用JSONP库输出我的外部模块，但我不知道如何在用户网站中加载它。

我还考虑在用户网站中使用SystemJS动态加载外部模块：

• 我可以用Webpack中的SystemJS替换内部JSONP机制（以避免在m捆绑包中使用JSONP机制）。
• SystemJS看起来比RequireJS更好、更现代。
• 这将需要添加SystemJS（仅限s.js）开销。我正在尽可能少地使用依赖项。

- Yves M.

---

与 https://dev59.com/UlUL5IYBdhLWcg3wmpDH 相关。 - Yves M.

Answer 1

如果我没有理解问题，我很抱歉，但是我最近根据您提供的链接中的文章制作了一个项目。 您是否可以将两个应用程序都托管并在运行时加载chunk.js的部分？这就是这篇特定文章示例的工作方式。文章中提供了一个示例。一些餐厅应用程序，动态加载不同的微前端。这难道不正是您需要的吗？

下面的代码是这个特定示例的“核心”。看一下。

componentDidMount() {
    const { name, host } = this.props;
    const scriptId = `micro-frontend-script-${name}`;

    if (document.getElementById(scriptId)) {
      this.renderMicroFrontend();
      return;
    }

    fetch(`${host}/asset-manifest.json`)
      .then(res => res.json())
      .then(manifest => {
        const script = document.createElement('script');
        script.id = scriptId;
        script.src = `${host}${manifest['main.js']}`;
        script.onload = this.renderMicroFrontend;
        document.head.appendChild(script);
      });
  }

- AdamKniec