Три недели назад кто-то попросил в Канале 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'
, но теперь будет указывать правильное имя файла в операторе импорта.
Мы строим и бегаем и хора !!!
Резюме!
- Обновите браузер до недавнего (достаточно свежего для поддержки модуля ES2015)
- Измените tsconfig.json
target
наes2015
- Измените tsconfig.json
module
наes2015
- Всегда добавляйте расширение .js в операторы импорта
- Используйте http-сервер, например
live-server
, чтобы избежать проблем CORS с протоколомfile://
БОНУС: явно установите для tsconfig.json moduleResolution
значение node
. В этом нет необходимости, если вы не используете внешние библиотеки или @types/*
пакеты.
См. Все это по адресу: https://github.com/SalathielGenese/ts-web
Вот и все !!!
Хлопайте, спрашивайте, комментируйте, предлагайте, делитесь!