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

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

2 голосов
/ 14 января 2020

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

  • Сайт называется Пользователь-сайт
  • Модуль JavaScript называется Внешний модуль

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

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

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 16 февраля 2020

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