meteorの開発にCoffeeScriptとjadeを使う

今更ながらMeteorで遊んでみることにしました。

私はカッコ閉じるの苦手星人になってしまっているので

-JavaScriptはCoffeeScript、
-HTMLはJade

そんな環境を構築してみようと思います。

まずテスト的なプロジェクトを作ります。

meteor create hello

参考サイト

• 第1回　Meteorをはじめよう

coffee scriptの導入

meteor add coffeescript

↑これだけでOKです。

.meteor/packagesを見てみると、追加されていることが確認できます。

プロジェクトのhello.jsを削除してhello.coffeeを追加します。

if Meteor.isClient
  Template.hello.greeting = ->
    "こんにちわーるど！"

  Template.hello.events "click input": ->

    # template data, if any, is available in 'this'
    console.log "You pressed the button"  if typeof console isnt "undefined"
    return

if Meteor.isServer
  Meteor.startup ->
    # code to run on server at startup

プロジェクトのルートでmeteorしてブラウザで開くとバッチリ反映してます。

jadeの導入

meteorには独自のパッケージマネージャがあるので、まずそれを導入します。

npm install -g meteorite

これでmrtコマンドが使えるのでjadeパッケージをインストールします。

mrt add jade

これでOKです。

hello.htmlを削除してhello.jadeを追加します。

head
  title hello

body
  +hello

template(name="hello")
  h1 Hello coffee!
  !{greeting}
  input(type="button" value="Click")

meteorではテンプレートエンジンとしてHandlebars.js
が使われていますが、その辺りの作法がちょっと違うようです。

{{> hello}}

の部分を

+hello

と書き換えます。

{{greeting}}

の部分を

!{greeting}

と書き換えます

これでjadeも使えそうです。