Kyubey
@Kyubey

Typescript и exports — как собрать для браузера без вебпака?

Здравствуйте. У меня есть проект на typescript. Когда я компилирую его, проблем никаких нет - все js-файлы генерируются. Тем не менее, в браузере это не работает из-за ошибки с экспортами:
Uncaught ReferenceError: exports is not defined

Проблема здесь в том, что в сгенерированных js-файлах присутствует вот эта строка:
Object.defineProperty(exports, "__esModule", { value: true });

, которая вызывает проблемы, потому что браузер не знает никаких exports. Она там появляется независимо от того, что я выставлю в module и target в tsconfig.json.

TL;DR: я хочу иметь возможность импортить import ... from "...", но при этом не терять возможности дебажить тайпскрипт в браузере.

Опишу на примере библиотеки uikit.

Прежде чем вы напишете мне про Webpack - я уже и так его использую. Если собирать всё вебпаком, ошибки "exports is not defined" уже нет, вебпак всё резолвит.
Однако вебпак больше подходит для продакшена, когда нужно собрать всё в один готовый файл.
Во-первых, он компилирует по 5 секунд, это долго (у меня 10 строк тестового кода).
Во-вторых, если собрать всё в один файл, пропадает возможность дебага кода в браузере - нет сурсмап, да и как дебажить огромный файл, в который включены библиотеки.
В третьих, у самого вебпака есть проблемы с некоторыми библиотеками (в частности, для uikit он стирает глобальную переменную uikit, из-за чего тот перестаёт работать, и это приходится делать вручную костылями через (<any>window)["uikit"] = UIkit; - хотя это уже решённая проблема, это всё равно ещё одна причина, по которой вебпак затрудняет разработку и дебаг).

Я также знаю о target:ESNext и module:ES2015 (и прочих настройках tsconfig). Это не работает. Я прямо сейчас поставил в тсконфиге эти значения и строка с exports всё равно присутствует, ничего не меняется. Я долго гуглил решения по этому вопросу, но ничто не помогает.

Наконец, есть вариант с референсами ///<reference path="..." />, когда нужно также проставить System для module в тсконфиге. Это работает. Однако это отнимает возможность делать так:
import UIkit from "uikit";
Из-за того, как написан d.ts для uikit (взято из @types/uikit с npm), по-другому использовать его нельзя. Предполагается, что его будут импортить, а не референсить. Поэтому, хоть мне и нравятся референсы, тайпдефы чужих библиотек не позволяют мне нормально их использовать.

Я пробовал подключать core-js, а также commonjs, но и они ничего не изменили.

Может быть, есть какой-то выход, которого я не вижу? Заранее спасибо.
  • Вопрос задан
  • 176 просмотров
Решения вопроса 1
Kyubey
@Kyubey Автор вопроса
Дело было в неверном конфиге. См. комментарии.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 21:25
2000 руб./за проект
28 мар. 2024, в 21:17
5000 руб./за проект
28 мар. 2024, в 20:46
150000 руб./за проект