Как импортировать модуль Javascript из внешнего файла JavaScript в тег <script> файла HTML

Question

Я пытаюсь импортировать модуль под названием "JSZip" из внешнего пакета узла под названием JSZip в свой HTML-файл.

Импорт напрямую с помощью команды импорта не работает,

<script>    

     import JSZip from '../node_modules/jszip/dist/jszip.min.js';

</script>

Я также пробовал импортировать его в HTML-файл в теге скрипта

<script type="text/javascript" src="node_modules/jszip/dist/jszip.min.js"></script>

Но приведенный выше код все еще не импортирует модуль.

Я понимаю, что этого можно легко достичь, если мы сделаем это непосредственно в файле javascript, но я создаю это для плагина figma, и я ограничен сделать это в файле ui.html, потому что API-интерфейсы браузера можно вызывать только на стороне html а файл js запускается в другой среде песочницы.

Чтобы узнать больше о файлах ui и js плагина figma, вы можете обратиться к этому

Заранее благодарю за любую помощь:)

Answer 1

Добавить type="module"в тег скрипта. это будет работать.

<script type="module">    
     import JSZip from '../node_modules/jszip/dist/jszip.min.js';
</script>

Answer 2

Либо импортируйте модуль с <script type="module">(см. таблицу совместимости)...

Или, для поддержки IE и других старых браузеров, используйте Babel или аналогичный и скомпилируйте весь свой JS в один минифицированный и совместимый с ES5 (старый javascript) файл.

Answer 3

В этом случае лучше всего использовать webpack. Вы получаете преимущество использования импорта js и создания небольших модулей для вашего кода. Но когда придет время его выполнить, wepback все это преобразует в один-единственный файл js.

Убедитесь, что у вас есть package.json файл, который имеет "type": "module" и в своем коде вы можете импортировать другие файлы js с помощью import Foo from './Foo.js' в то время как файлы js имеют export default { }