Как мне обрабатывать зависимости ESM от зависимостей в браузере (без UMD)?

Question

У меня есть один проект, который я сворачиваю в файл. Конечный файл выглядит примерно так ...

import {SomeClass} from "another-lib";
export class Thing{
  ...
}

Затем я пытаюсь загрузить как

<script type="module" src="myHostedVersion.mjs">

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

Итак, вопрос в том, как мне правильно загрузить его из браузера (при условии, что я размещаю M JS)? Нужно ли переписывать путь с использованием накопительного пакета или есть более чистый вариант? В настоящее время я работаю, загружаясь в окно.

Answer 1

Браузер не может разрешить имена модулей, которые не являются относительными путями, например «another-lib». Существует несколько различных способов решения этой проблемы:

1. Сводный пакет может связать этот модуль и вывести один файл Javascript. Использование output.format: 'es' создаст файл модуля, который не будет выглядеть безобразно.

2. Вы можете импортировать модуль из Pika CDN , используя HTTPS URL.

import {SomeClass} from "https://cdn.pika.dev/another-lib";
export class Thing{
  ...
}

Вы можете использовать такой инструмент, как Snowpack , чтобы создавать дополнительные файлы только для внешних модулей.

import {SomeClass} from "../web_modules/another-lib.js";
export class Thing{
  ...
}

Answer 2

Для меня ответом было либо создать «толстый» файл UMD js с плагином разрешения для свертывания (некрасиво), либо просто импортировать проект, и, поскольку он привязывался к окну, я мог получить к нему доступ таким образом. Затем я просто вставил нулевую проверку, чтобы убедиться, что она в окне.