Используя Webpack, как динамически загружать внешний модуль, созданный с помощью другого Webpack

Допустим, я управляю двумя проектами JavaScript, созданными с помощью Webpack:

  • Веб-сайт под названием Пользовательский веб-сайт.
  • Модуль JavaScript под названием External-Module.

Обратите внимание, что я использую 2 отдельных проекта по тем же причинам, которые описаны в Микроинтерфейс архитектура.

Я хочу, чтобы мой User-Website мог динамически загружать External-Module по запросу (используя любую модульную технологию JavaScript). Мой User-Website знает во время сборки URL-адрес, по которому можно добраться до External-Module.

Я могу выбрать любую технологию, необходимую как для Пользовательского веб-сайта, так и для Внешнего модуля.

Я ищу решение:

  • Это легко реализовать (может быть, JSONP, который Webpack уже обрабатывает для динамической загрузки фрагментов?)
  • Это не увеличивает нагрузку как на User-Website, так и на External-Module (например, модули JavaScript выглядит хорошо, но требует большого количества полифиллов)

Мой вопрос связан с https://github.com/webpack/webpack/issues/7526

Я попытался использовать выходные данные библиотеки JSONP в своем Внешнем модуле, но не знаю, как загрузить их на Пользовательский веб-сайт.

Я также думаю об использовании SystemJS в User-Website для динамического загрузить Внешний модуль:

  • Я также мог бы заменить внутренний механизм JSONP на SystemJS в Webpack (чтобы сохранить механизм JSONP в пакетах m).
  • SystemJS выглядит лучше и современнее, чем RequireJS
  • Для этого потребуется добавить накладные расходы SystemJS (только s.js). Я пытаюсь использовать меньше зависимостей, поскольку возможный.

webpack javascript es6-modules micro-frontend
person Yves M.    schedule 14.01.2020    source источник
comment
Очень похоже на stackoverflow.com/q/50097327/1480391   -  person Yves M.    schedule 14.01.2020

Ответы (1)


arrow_upward
0
arrow_downward

Извините, если я не понял вопроса, но недавно я сделал проект на основе статьи по предоставленной вами ссылке. Разве вы не можете просто разместить оба приложения и загрузить часть 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);
      });
  }
person AdamKniec    schedule 16.02.2020