Компиляция CoffeeScript в JavaScript используя Sublime Text 2

4 янв. 2013 г. | | |

CoffeeScript - рафинированный JavaScript, который хочется писать ещё и ещё. Цель этой заметки рассмотреть, как писать и компилировать код на CoffeeScript в js, используя Sublime Text 2.
Весь процес можно разбить на два этапа:
1. Подготовительный этап - установка компилятора CoffeeScript
2. Установка плагина CoffeeScript под Sublime Text 2
И так, приступим. 
На первом этапе нужно установить компилятор CoffeeScript в JavaScript. Есть несколько способов (способ1, способ2), самый простой - использовать nodejs. Для этого скачиваем и устанавливаем nodejs. После установки проверяем системную переменную PATH (должна быть %AppData%/npm"):

Если такой переменной нет, то нужно создать её.
Дальше в коммандной строке:
cd %PROGRAMFILES%/nodejs
npm install coffee-script

Теперь нужно добавить в системную переменную PATH значение %ProgramFiles%\nodejs\node_modules\.bin. Конечное значение переменной должно содержать %AppData%\npm\;%ProgramFiles%\nodejs\node_modules\.bin
Если всё сделано правильно, то теперь из командной строки можно вызвать компилятор CoffeeScript командой coffee.

На этом подготовительный этап закончен. Дело осталось за малым - установить и сконфигурировать плагин под Sublime Text 2.
Сtrl + Shift + P -> Install Packages (если не понятно, что это, то тут написано, как установить Package Control) и есть два плагина: CoffeeScript и Better CoffeeScript, который является форком от первого. После установки нужно перезагрузить Sublime Text 2.
Конфигурация обоих плагинов для Windows-платформы одинаковая:
1. в Sublime Text 2 выбираем Preferences -> Browse Packages
2.  находим папку с именем плагина
3. находим и открываем в папке файл CoffeeScript.sublime-build
4. заменяем начальное значение
{
    "cmd": ["cake", "sbuild"]
    , "path": "/usr/local/bin:$PATH"
    , "selector": "source.coffee"
    , "working_dir": "$project_path"
    , "variants":
    [
        {
        "name": "Run",
        "cmd": ["coffee", "$file"]
        }
    ]
}

на
{
    "path": "$HOME/bin:/usr/local/bin:$PATH",
    "cmd": ["coffee","-c","$file"],
    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "selector": "source.coffee",

    "windows":
    {
        "cmd": ["coffee.cmd","$file"]
    }
}

5. сохраняем файл.
Теперь создаем тестовый test.coffee с содержимым console.log "Hello, world!", сохраняемся и жмём Ctrl+B. Если всё прошло успешно, то в области сообщений (messaging board) должна появиться фраза "Hello, world!" и время выплонения скрипта, а в папке, где расположен test.coffee должен появиться test.js - скомпилированный в javascript coffeescript.
И на последок пару слов о параметрах командной строки. Добавляя в строку "cmd": ["coffee.cmd","$file"] разные флаги, можно управлять компилятором CoffeeScript. Несколько команд, которые могут пригодиться:
-c (--compile) - скомпилировать  в JavaScript и сохранить как файл .js папке рядом с исходным .coffee-файлом, если не указан каталог
-o (--output) - указать каталог для скомпилированных js-файлов
-p (--print) - вывести скомпилированный код JavaScript в stdout
В итоге, фрагмент билд-конфигурации с дополнительными флагами должен выглядеть так:
"cmd": ["coffee.cmd", "-c", "$file"]

18 коммент.:

Artur Dudko комментирует...

спасибо за статью. всё сделал как указано, но при попытке build'a Sublime выдаёт ошибку.

[Error 2]
[cmd: [u'coffee', u'C:\\test.coffee']]
[dir: C:\]
[path: C:\Program Files\nodejs\;c:\Program Files\nodejs\node_modules\.bin;C:\Users\55\AppData\Roaming\npm]
[Finished]


причём, папки .bin в node_modules нет. не поможете выяснить, в чём может быть проблема?

Shemyakina Tatiana комментирует...

А из командной строки у вас CS командой "coffee" вызывается без ошибок?

Artur Dudko комментирует...

да, команда coffee вызывается нормально

Artur Dudko комментирует...

в том-то и дело. система 64-битная, но установился nodejs в Program Files обычный.

Shemyakina Tatiana комментирует...

В папке %ProgramFiles%/nodejs/node_modules должна быть такая структура папок, как на прикреплённом скриншоте.
> папки .bin в node_modules нет.
Такое может получиться, если вы перед установкой npm install coffee-script не выполните команду cd %PROGRAMFILES%/nodejs
Но тогда у вас и команда coffee отрабатывать не должна.

Антон комментирует...

сделал все как в статье но при компиляции Ctrl+B в области сообщений ничего не отображается и test.js тоже не создается. Помогите плиз.

Shemyakina Tatiana комментирует...

Антон, в командной строке "coffee" вызывается без ошибок?

Антон комментирует...

Да вызывается без каких то проблем.

Shemyakina Tatiana комментирует...

Проверьте в Sublime Text в Tools -> Build System выбрана ли правильная система сборки.

Антон комментирует...

Нет стояло на Automatic, поставил > перезапустил > создал проэкт > написал console.log "Hello, world!" > ctrl+s (test.coffee) > ctrl+b > не работает. В строке состояния пишет "Buliding" на какое то время и все. консоль пуска.

netwixell комментирует...

)), я видимо что то напортачил при установе. У меня получается каким то кривым боком стоит 2 CoffeeScript. Как мне откатить все назад чтоб по новой установить? или как удалить один из них ?

Shemyakina Tatiana комментирует...

Вам нужно удалить один из конфигов билд-системы для CoffeeScript. Скорее всего, один конфиг сделал плагин (например, BetterCoffeeScript), а один - вы вручную. Preferences -> Browse Packages... дальше в открышейся папке перейти в папку User и в ней найти что-то типа coffeescript.sublime-build

Антон комментирует...

Я понял почему их 2. Полностью удалить получилось только после полной зачистки всех папок включая "AppData\Roaming\Sublime Text 2".
Опять поставил уже без заминки все выполнил и отследил что вторая система сборки появляется поле выполнения пункта:
"Сtrl + Shift + P -> Install Packages (если не понятно, что это, то тут написано, как установить Package Control) и есть два плагина: CoffeeScript и Better CoffeeScript, который является форком от первого. После установки нужно перезагрузить Sublime Text 2."
На сколько я понял процесс установки просто элементарен а процес утановки описаный в этом посте невероятно сложный требующий платонических усилий.
И так "CoffeeScript и Better CoffeeScript" это одно и тоже поэтому устанавливать нужно что то одно.

Антон комментирует...

И вот еще что nodejs нужно кочать я надеюсь msi а не exe ?

Антон комментирует...

В опщем я понял что это не возможно. А плохо((

Алексей комментирует...

У меня в командной строке "coffee" вообще не вызывается, и при установке
coffee-script через cmd вывалилась куча ошибок. В чём может быть проблема?

Дон Жуан комментирует...

подскажите плиз в чём было дело. Установил nodejs в PRogramFiles(x86), в Path всё как положено прописал C:\Users\kos\AppData\Roaming\npm;%Program Files(x86)%\nodejs\node_modules\npm\.bin Но при попытке установки кофе скрипта путём npm install coffee-script выдавало ошибку, вернее первые два запроса GET и ответ 304 прошли а затем сплошные ERR красным. Помогло решение путём npm install -g coffee-script.Причём папки .bin не создалось в nodemodules - не создалось, там лишь одна папка npm, но компилятор работает...мистика какая то. Вообщем без 100грам не разберешь

Дон Жуан комментирует...

Понимаю что при такое способе как сделал я спрашивать глупо но все же, у меня при нажатии Ctrl B в консоли, где должны выводится сообщения, ничего не отображается, зато файл JS создаётся, подскажите плиз в чём дело

Отправить комментарий