Как импортировать React из глобальной переменной?

Question

У меня есть особый сценарий. Одно веб-приложение построено на React. Еще одна утилита JavaScript есть в React, но эта утилита загружается тегом script. Итак, приложение и утилита построены изолированно. В результате как в файле комплекта веб-приложений, так и в файле комплекта утилит встроен React.

Теперь мы хотим, чтобы они разделили одну копию React. Предпочтительно экспортировать React как глобальную переменную в коде веб-приложения (например, global.React), чтобы утилита могла использовать его напрямую.

Код в утилите все еще как ниже. Надеемся, что веб-пакет может игнорировать его и импортировать React из global.React.

import React from 'react';
import ReactDOM from 'react-dom';

Вопрос: как настроить веб-пакет, чтобы указать утилите не связывать React?

Answer 1

Протестировано с использованием нереактивного приложения:

• в index.html import React from CDN, это определит глобальный React.

  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

• где-то в приложении, выполняющем, как показано ниже, преобразуется в экземпляр React:

  declare var React; console.log('React is ', React);

Так что, если ваш первый пакет регистрируется React в глобальном масштабе, вы можете использовать его.

Просто имейте в виду, что импортировать из глобальных систем, как это, считается плохой практикой. Он превосходит концепцию модульности webpack. Например, если ваш первый модуль обновится до какой-то обратной несовместимой версии React, ваш второй модуль также в конечном итоге сломается.

Для небольших проектов может быть в порядке.