File Watchers в Intellij IDEA на примере watcher’а для TypeScript

В продукты Intellij – IDEA, WebStorm, PhpStorm, встроены так называемые транспилеры (transpilers), по-другому source-to-source компиляторы, транскомпилеры. Эти транспилеры могут на лету преобразовывать

  • less, sass, scss в css код
  • CoffeeScript, TypeScript, Dart в JavaScript код

ну и еще немного 🙂

На примере IDEA и TypeScript можно посмотреть как это работает.

Итак, вначале нужно установить сам TypeScript. Тайпскрипт можно взять на сайте www.typescriptlang.org, я ставил через npm для Node.js

npm install -g typescript

Теперь в проекте создаем каталог, где будут лежать тайпскрипт файлы, и создаем там любой, даже пустой тайпскрипт файл (Для того, чтобы создание File Watcher’а стало доступно, нужно создать хотя бы один *.ts файл). Все, теперь и Идея выдаст подсказку, что можно настроить file watchers, и создание их будет доступно в настройках (File->Settings->File Watchers (в разделе Project Settings)

helpTip

 

settings_wnd

Добавляем новый для TypeScript

 

fileWatchers_wnd

Вкратце что нужно изменить от настроек по-умолчанию:

  1. Если typescrip был установлен без -g ключа, то его компилятор, скорее всего,  будет в home пользователя в node_modules и, наверное, придется вручную изменять путь в поле Programm
  2. Arguments – аргументы командной строки для компилятора тайпскрипта. Я сразу добавил туда макросов для указания пути создаваемых файлов в результате получилось следующее:
     --out $ModuleFileDir$/web/js/$FileDirPathFromParent(ts)$$FileNameWithoutExtension$.js $FileName$ --sourcemap $FileName$ -target ES5

    в результате в каталоге модуля, в каталоге web/js/ создаются каталоги начиная от ts каталога с *.ts файлами (макрос $FileDirPathFromParent(ts)$), далее создается файл с таким же именем как и тайпскрипт-файл, но с расширением js, так же добавляется map файл (аргумент –sourcemap).
    Следует обратить внимание на -target ES5 аргумент, указывающи, что нужно генерировать код для ECMAScript 5-й версии

Все. Теперь после внесения изменений в ts файлы, будут перекомпилированы js файлы и, также, обновлены map файлы

3 Comments
  1. Serega
    • shrewmus
  2. Serega

Leave a Reply

Your email address will not be published. Required fields are marked *