Главная Категории Контакты Поиск

Базовая настройка TypeScript проекта

Как быстро собрать TypeScript проект с помощью parcel bundler.

TypeScript·26.09.2019·читать 1 мин 🤓·Автор: Alexey Myzgin

Начать работу с TypeScript сейчас проще, чем когда-либо. Ты можешь настроить среду разработки прямо в своем браузере или быстро собрать локальную среду с помощью сборщика пакетов parcel bundler.

Самый быстрый способ опробовать TypeScript - перейти на CodeSandbox.io, нажать на Сreate Sandbox и выбрать сэндбокс Vanilla + TS. Также, всегда можно перейти по ссылке Vanilla + TS. Здесь уже есть файл TypeScript, с которым можно играть и редактировать на свой вкус. Каждое внесенное изменение будет автоматически отражено в окне.

В ином случае, можно развернуть локально среду с установленным Node. Для этого нужно установить parcel bundler, выполнив команду npm install -g parcel-bundler. Это установит parcel глобально. С установленным parcel, создать новый файл index.html в корне директории. Внутри html файла создать тег script с src="./index.ts":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./index.ts"></script>
</html>

Затем, создать файл index.ts, на который указали ссылку. Внутри файла index.ts напишем console.log("Hello from TypeScript!").

Parcel автоматически обрабатывает всё для нас. Для этого нужно выполнить команду parcel index.html - он установит TypeScript, создаст папку dist со всеми необходимыми ему файлами и запустит сервер с портом http://localhost:1234. Открыв консоль в браузере, увидим сообщение Hello from TypeScript!.

Если ты Node разработчик, тебе необходимо удалить папку dist (если она есть и её сгенерировал parcel). Затем запустить parcel, указав файл TypeScript index.ts и цель --target=node.

parcel index.ts --target=node

Ты увидишь, что он снова скомпилировался в папку dist, но на этот раз с index.js. Запускаешь node с нужным файлом node dist/index.js и в консоле увидишь то же сообщение Hello from TypeScript!.

Website, name & logo
Copyright © 2022. Alex Myzgin