Использование внешних зависимостей в React, загруженных из CDN - PullRequest
Новая
       84

Использование внешних зависимостей в React, загруженных из CDN

3 голосов
/ 18 июня 2020

Я относительно новичок в ReactJS и использую его для определенных интерактивных элементов в существующем приложении. Я импортирую React и ReactDOM из CDN: 

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

И я пишу свои ReactJS в JSX в некоторых. js файлах, которые Babel переводит, и я импортирую вот так: 

<script src="/static/react/NameScores.js"></script>

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

Например, я хочу использовать response-card-flip. Кажется, у него есть CDN, поэтому я импортирую его так: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-card-flip/1.0.10/ReactCardFlip.min.js"></script>

Но это не работает. Я получаю сообщение об ошибке ReactCardFlip.min.js:1 Uncaught ReferenceError: exports is not defined at ReactCardFlip.min.js:1.

Как я могу использовать внешние зависимости в моей настройке на основе CDN? Обязательно ли использовать NPM? Я пробовал, но не смог заставить React работать через NPM, и CDN намного проще.

Спасибо

Ответы [ 3 ]

1 голос
/ 27 июля 2020

Думаю, что было бы лучшим вариантом перейти на npm пакеты. Во-первых, не все пакеты доступны на cdn, во-вторых, будет сложно поддерживать версии пакетов, используя только теги скриптов. Я настоятельно рекомендую go в направлении npm / yarn, и это более предпочтительный вариант даже с точки зрения создателей реакции.

Вы можете, например, легко использовать приложение react create https://create-react-app.dev/docs/getting-started/ чтобы начать реализацию приложения реакции, а затем создайте файл dist, который вы можете включить как тег скрипта.

1 голос
/ 27 июля 2020

Хотя я бы рекомендовал вам использовать npm, вы все равно можете использовать теги скрипта, но вы должны включить загрузчик модуля, например Require JS для сборок UMD: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
0 голосов
/ 11 августа 2020

В конце концов, после долгой борьбы с NPM, я решил использовать Browserify для импорта модулей NPM непосредственно в мой javascript. Он прекрасно работает для того, что мне нужно.

Он работает, объединяя несколько файлов javascript в один файл (bundle.js). При этом он просматривает код для require(...) (который недействителен javascript), импортирует соответствующий модуль и помещает его непосредственно в bundle.js.

Я использую Watchify для автоматизации этого процесса. Запущенный скрипт следит за изменениями в моем коде, а затем автоматически запускает Browserify на нем.

Например, если я хочу использовать react-string-replace, я просто делаю что-то вроде этого: 

const reactStringReplace = require('react-string-replace')

mergedPhrase = reactStringReplace(
 mergedPhrase,
 lookup,
 (match, k) => (
 replacement
 )
)
...