Использование модулей ES с babel-standalone

Цитирование документации babel https://babeljs.io/docs/en/babel-standalone#usage :

Если вы хотите использовать встроенную поддержку ES-модулей в вашем браузере, обычно вам нужно установить атрибут type=module в теге скрипта. С @babel/standalone вместо этого установите атрибут data-type=module

Однако по какой-то причине при включении моего основного файла index.js (который импортирует другие файлы js/jsx с помощью импорта) кажется, что Babel преобразует мои операторы импорта в операторы require, потому что я получаю ReferenceError: require не определено.

Единственный способ обойти это, который я нашел, — это использовать плагин transform-modules-umd и включить все мои js-файлы в качестве скриптов. Не уверен, что это ошибка, когда data-type=module не работает, или я что-то упустил.

Это теги моих скриптов в index.html

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

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

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="index.js" type="text/babel" data-type="module"></script>

Спасибо за помощь


person George Kamar    schedule 14.09.2020    source источник


Ответы (1)


На мой вопрос ответил Amareis на странице github babel: https://github.com/babel/babel/discussions/12059

Проблема в том, что babel не транспилирует модули, импортированные через ES-модули, они должны быть явно включены как скрипты с типом text/babel. Таким образом, файл JSX, импортированный через модули ES в скрипте index.js, импортируется после того, как index.js транспилируется Babel, и сам не транспилируется.

Также получил предложение получить и выполнить мои сценарии с сервисным работником для целей разработки. babel-standalone преобразует их после извлечения

person George Kamar    schedule 21.10.2020