Если вы похожи на меня, вы не получите удовольствия от того, как настроить проект в наши дни, но хорошая новость заключается в том, что рабочий процесс, после того как все настроено правильно, никогда не был лучше.
По сравнению с вашим исходным рабочим процессом вы можете наложить слой так:
Компиляция в режиме просмотра
Использовать опцию компилятора TypeScript --watch
:
tsc --watch
Каждый раз, когда изменяется исходный файл *.ts
, он будет постепенно перекомпилировать выходные файлы *.js
. Теперь вы можете редактировать код, обновлять окно браузера и видеть изменения, как и раньше.
Используйте IDE, которая компилируется при сохранении
Многие IDE с поддержкой TypeScript, такие как Код Visual Studio и Atom , могут компилировать TypeScript в JavaScript каждый раз, когда вы редактируете файл. Опять же, теперь вы можете просто редактировать код и обновлять браузер, как вы делали это раньше, даже без необходимости использовать командную строку.
Использовать Webpack
Webpack - это пакет JavaScript. Сначала это будет довольно пугающим, но это мощный, гибкий и в настоящее время промышленный стандарт. Вы можете думать об этом как о настраиваемом инструменте сборки для разработки браузеров. У них есть руководство по настройке TypeScript . После того, как вы настроили веб-пакет для обработки TypeScript (используя ts-loader
), вы можете запустить webpack-dev-server
. Теперь изменения кода не только постепенно перекомпилируют TypeScript при сохранении (в памяти, а не в файловой системе), но также обновят окно браузера. В Webpack есть много хитростей, поэтому первоначальная настройка того стоит.
(угловой) Использование angular-cli
Для проектов Angular они предоставляют angular-cli
, инструмент, построенный поверх Webpack, который делает процесс начальной настройки и разработки еще проще.
(Реакция) Использование react-create-app
Аналогично для проектов React они создали create-react-app
, инструмент для запуска и запуска без особых настроек. Он имеет множество опций, которые упрощают настройку, например, вы можете легко добавить Flow , статическую систему типов, похожую на TypeScript, которая прекрасно работает с React, или вы можете использовать create-react-app-typescript
, который является форком проекта, который включает TypeScript (который также отлично работает с React).
Заключение
Я знаю, откуда ты, я сам вспоминаю о простых днях веб-разработки, но, надеюсь, я убедил тебя, что сегодня есть несколько отличных инструментов, которые обеспечивают действительно хорошие рабочие процессы, даже лучше, чем раньше! Этот пост фактически только царапает поверхность.