Я искал паутину в течение часа, надеясь, что не задаю повторяющийся вопрос, но я действительно не нахожу ничего по своей проблеме, но такое чувство, что это должно случиться с людьми, кроме меня.
Итак, вот настройки:
- У нас есть 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
внешним тогда?