Три недели назад кто-то попросил в Канале TypeScript Gitter помочь настроить проект Barbone TypeScript для Интернета, то есть без веб-пакета и его товарищей, а также без использования файлов / amd / systemjs.

Материал, полученный в результате этой работы, доступен на GitHub.

Разве это не так просто?

Нет это не так ! Из коробки не пойдет. Почему ?

В чем проблема?

Что ж, приступим к новому проекту.

Создайте папку проекта
mkdir ts-web

Войдите в папку проекта
cd ts-web

Запустите проект машинописного текста
tsc --init
На этом этапе у вас должен быть tsconfig.json с этой соответствующей частью :

Наши источники…

Сборка
tsc

Выполнить
Откройте файл index.html в браузере.

Вместо отображения окна предупреждения вы получаете сообщение об ошибке в консоли браузера.

Uncaught ReferenceError: экспорт не определен

Почему вы получаете эту ошибку?
Поскольку вывод index.ts, скорее всего, будет следующим

Этот вывод хорошо подходит для среды NodeJS. Но у нашего браузера нет глобального свойства exports.

Как исправить?

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

Наш браузер современный, и мы смело пишем отчеты об импорте / экспорте ES2015. Итак, давайте сообщим TypeScript, что мы нацелены на современный браузер, совместимый с ES2015, и что мы хотели бы использовать модули ES2015 (вместо стандартных commonjs).

Бонус: для этой простой демонстрации следующее необязательно, но если вы полагаетесь на другие библиотеки, такие как babylonjs , вам понравятся эти типы из node_modules / правильно разрешаются компилятором TypeScript. Поэтому явно установите moduleResolution на node

Затем мы строим: вывод index.js теперь выглядит следующим образом

И когда мы бежим ...

Uncaught SyntaxError: Неожиданный токен {

За этой ошибкой стоит скобка нашего оператора импорта.

TypeScript знает, что мы используем ESModule, но наш браузер - нет. Поэтому мы напомним нашему браузеру, используя type="module" в теге скрипта.

Строим, бегаем и…

Доступ к скрипту в 'file: //some/higher/folders/ts-web/index.js' из origin 'null' был заблокирован политикой CORS: запросы с перекрестным происхождением поддерживаются только для схем протоколов: http, data, chrome , хром-расширение, https.

Из-за ограничений CORS ESModule не работает по протоколу file://. Нам нужен веб-сервер.

yarn add --dev live-server
yarn run live-server

И наш браузер открывает новую вкладку с нашей страницей.

Но подождите, окно предупреждения все еще не отображается !!!

Да, но наша консоль выдает другие ошибки. ЭТО ПОСЛЕДНЯЯ ОШИБКА, ОБЕЩАЮ ВАМ.

Не удалось загрузить ресурс: сервер ответил статусом 404 (не найден) - данные: 1

Наш браузер пытается получить ./data, но этого файла нигде нет. Вместо этого у нас есть расширение ./data.js (обратите внимание на .js). Существуют исторические причины и веские аргументы, почему TypeScript не добавляет расширения к импортированным файлам. И мы не будем углубляться в это сегодня.

Параллельно с этим TypeScript рассматривает как import './data' и import '/data.js', но теперь будет указывать правильное имя файла в операторе импорта.

Мы строим и бегаем и хора !!!

Резюме!

  1. Обновите браузер до недавнего (достаточно свежего для поддержки модуля ES2015)
  2. Измените tsconfig.json target на es2015
  3. Измените tsconfig.json module на es2015
  4. Всегда добавляйте расширение .js в операторы импорта
  5. Используйте http-сервер, например live-server, чтобы избежать проблем CORS с протоколом file://

БОНУС: явно установите для tsconfig.json moduleResolution значение node. В этом нет необходимости, если вы не используете внешние библиотеки или @types/* пакеты.

См. Все это по адресу: https://github.com/SalathielGenese/ts-web

Вот и все !!!

Хлопайте, спрашивайте, комментируйте, предлагайте, делитесь!