Webpack: взаимодействие внешних модулей и модулей ES - PullRequest
0 голосов
/ 14 февраля 2020

Я искал паутину в течение часа, надеясь, что не задаю повторяющийся вопрос, но я действительно не нахожу ничего по своей проблеме, но такое чувство, что это должно случиться с людьми, кроме меня.

Итак, вот настройки:

  • У нас есть html файл с 3 тегами сценария (React, ReactDOM и наш комплект приложений)
  • React и ReactDOM загружаются как модули UMD с типом "var", поэтому они будут отображаться в окне, например window.React и window.ReactDOM
  • Наш пакет приложений связан с веб-пакетом, имеет externals ссылки на React и ReactDOM и использует react-redux.

Теперь проблема заключается в следующем:

веб-пакет связывает файл, совместимый с модулем es6, из react-redux в наш пакет (я никогда не просил его сделать так), что означает, что он будет импортировать файл, на который указывает поле «модуль» в package.json, и который использует импорт по умолчанию типа ES6 для React, например, в одном из своих файлов:

import React from 'react';

Из-за связи внешнего модуля в веб-пакете этот будет фактически переводить на это:

React = webpack_require('react').default 
// where webpack_require('react') will resolve to window.React

К сожалению, загруженный в окно модуль React UMD не ожидает, что он будет потребляться таким образом, у него нет экспорта по умолчанию, поэтому react-redux ударов вверх.

Вопросы

Чтобы сделать эту работу, у меня есть несколько вариантов, но я не смог достичь ни одного из них. Я думаю, что любой из них приведет меня к конечной строке sh.

Как мне сказать webpack смотреть на react-redux как на проклятый модуль CJS / UMD, а не на модуль ES6 .. . использовать поле «main» из пакета. json, а не «module»?

Как сказать webpack искусственно обернуть внешний «React», чтобы он выглядел как модуль ES6 вот так:

React = webpack_require('react').default
// and webpack_require('react') should resolve to {default: React}

Есть ли другой выход? Должен ли я также сделать react-redux внешним тогда?

...