Требовать JS предотвращает привязку модуля UMD к Window - PullRequest
Новая
       106

Требовать JS предотвращает привязку модуля UMD к Window

0 голосов
/ 16 июня 2020

У меня есть модуль, в котором я использую Preact через скрипт UMD . Я использую это вместе с Externals Webpack . Когда я добавляю свой сценарий на другие страницы, все работает хорошо , если эта страница не использует Require JS. Требование JS предотвращает привязку Preact к объекту Window, что требуется для Webpack Externals.

Проблема кратко описана здесь: https://www.haykranen.nl/2013/05/10/the-problem-with-combining-umd-require-js-modules-and-non-umd-modules/

К сожалению, ни одно из решений, упомянутых в ссылке, не подходит для моего приложения.

Я пробовал использовать версии скрипта Preact, отличные от UMD, но в этих preact недоступен в окне (см. https://github.com/preactjs/preact/issues/2009).

Я также изучил некоторые настройки Webpack Externals, однако документация здесь не очень ясна.

Мне удалось кое-что достать работает, установив window.define = undefined перед загрузкой скрипта Preact (а затем снова изменив его после загрузки), но это решение кажется неправильным. В идеале я должен иметь возможность изменить конфигурацию Webpack или важный другой сценарий Preact.

Мой (упрощенный) код выглядит так: 

// webpack.common.js

    ...
    externals: {
      "preact": "preact",
    }
    ...

// entry.ts

function loadScript(options: LoadScriptOptions): Promise<Event> {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.onload = resolve;
    script.onerror = reject;

    Object.assign(script, options);

    document.head.appendChild(script);
  });
}

async function loadPreact(): Promise<void> {
  await loadScript({
    src: "https://static.ada.support/preact@10.3.3/dist/preact.umd.js",
    integrity: "sha384-tLgEh+l7ejtS6jr8fCQmvhA/hBYocw6uD4qghUf+GWAolyAQZaWjKsWMqzvAouIK",
    crossOrigin: "anonymous"
  });
}

import { h, render } from "preact";
...
...