まず始めに、leiningen 2とlein-cljsbuildというプラグインを使って、 CLJSの基本的なプロジェクトを作ってみよう。
Leiningenは、Clojureのためのビルド管理システムだ。lein-cljsbuildは ClojureScriptに特化したLeiningenのプラグインだ。
まだ何もやっていないのなら、まずはleiningenをインストールしよう。そして
新しいプロジェクトを作ろう。名前はmodern-cljs
だ。
lein new modern-cljs
お節介だけど、lein
を環境変数として$PATH
に入れることをお薦めしよう。
ClojureとClojureScriptをホストするためのディレクトリを作ろう。そして、
Leiningenが作ったsrc/modern_cljs
のディレクトリを新しい構成のディレクトリに
反映させよう。
cd modern-cljs
mkdir -p src/{clj,cljs/modern_cljs}
mv src/modern_cljs/ src/clj/
NOTE 2: due to java difficulties in managing hyphen "-" (or other special characters) in package names, substitute an underscore for any hyphen in corresponding directory names.
プロジェクトに静的ファイルをおいておくためのディレクトリも作っておこう。 (例えば、htmlのページとか、JavaScriptとか、CSSとか、ね)
mkdir -p resources/public/{js,css}
最後に、下のようなディレクトリ構成になればいい。
├── LICENSE
├── README.md
├── doc
│ └── intro.md
├── project.clj
├── resources
│ └── public
│ ├── css
│ └── js
├── src
│ ├── clj
│ │ └── modern_cljs
│ │ └── core.clj
│ └── cljs
│ └── modern_cljs
└── test
└── modern_cljs
└── core_test.clj
12 directories, 6 files
でだ。project.clj
を編集する必要が出てくる。というのも:
- プロジェクトにある
source-paths
のClojureのソースコードをアップデートするため。 - lein-cljsbuildのプラグインを
project.clj
の設定に追加するため。
Leiningenが作成したproject.clj
がそこにあるはずだ。
(defproject modern-cljs "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [[org.clojure/clojure "1.5.1"]])
そこにlein-cljsbuild
のアップデートされたバージョンを置いて、:cljsbuild
と
:source-paths
の設定をするんだ。
(defproject modern-cljs "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
;; CLJ source code path
:source-paths ["src/clj"]
:dependencies [[org.clojure/clojure "1.5.1"]]
;; lein-cljsbuild plugin to build a CLJS project
:plugins [[lein-cljsbuild "0.3.3"]]
;; cljsbuild options configuration
:cljsbuild {:builds
[{;; CLJS source code path
:source-paths ["src/cljs"]
;; Google Closure (CLS) options configuration
:compiler {;; CLS generated JS script filename
:output-to "resources/public/js/modern.js"
;; minimal JS optimization directive
:optimizations :whitespace
;; generated JS code prettyfication
:pretty-print true}}]})
project.clj
を設定したあと、ClojureScriptのファイルを、src/cljs/modern_cljs
ディレクトリに
作ろう。下のようなファイルだ。
(ns modern-cljs.modern)
(.write js/document "Hello, ClojureScript!")
これをmodern.cljs
というファイル名で保存しよう。
ノート3: ClojureScriptのソースコードは*.cljsであって、*.cljではないことに 注意しよう。
シンプルなHtmlを作って、そこにproject.clj
にあった:output-to
キーワードの値である
ポイントのscript
タグを入れよう。それをresources/public/
ディレクトリの中に、
simple.html
の中にセーブしよう。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple CLJS</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- pointing to cljsbuild generated js file -->
<script src="js/modern.js"></script>
</body>
</html>
ClojureからJavaScriptにするために、下のようにcljsbuild
のサブタスクである
once
を使おう。
lein cljsbuild once
Retrieving lein-cljsbuild/lein-cljsbuild/0.3.3/lein-cljsbuild-0.3.3.pom from clojars
Retrieving lein-cljsbuild/lein-cljsbuild/0.3.3/lein-cljsbuild-0.3.3.jar from clojars
Compiling ClojureScript.
WARNING: It appears your project does not contain a ClojureScript dependency. One will be provided for you by lein-cljsbuild, but it is strongly recommended that you add your own. You can find a list of all ClojureScript releases here:
http://search.maven.org/#search|ga|1|g%3A%22org.clojure%22%20AND%20a%3A%22clojurescript%22
Retrieving cljsbuild/cljsbuild/0.3.3-SNAPSHOT/cljsbuild-0.3.3-20130913.125809-2.pom from clojars
Retrieving cljsbuild/cljsbuild/0.3.3-SNAPSHOT/cljsbuild-0.3.3-20130913.125809-2.jar from clojars
Compiling "resources/public/js/modern.js" from ["src/cljs"]...
Successfully compiled "resources/public/js/modern.js" in 7.131854 seconds.
見ての通り、WARNINGといっている。これは、cljsbuild
プラグインは、ClojureScriptがどんなにリリース
されていたとしても、project.clj
ファイルの:dependencies
の部分に、特定のClojureScriptを使うように
強く薦めているのだ。
というわけで、ClojureScriptを:depedencies
に入れることで、cljsbuild
は幸せな気持ちになる!
(defproject modern-cljs "0.1.0-SNAPSHOT"
...
:dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-1878"]]
...)
NOTE 4: we added the latest CLJS release (i.e. "0.0-1878") available at the time of this writing.
lein cljbuild clean
コマンドは、以前の問題を綺麗にしてくれる
そしてlein cljsbuild once
をもう一度たたいてみよう。
lein cljsbuild clean
Deleting files generated by lein-cljsbuild.
lein cljsbuild once
Compiling ClojureScript.
Retrieving org/clojure/clojurescript/0.0-1878/clojurescript-0.0-1878.pom from central
Retrieving org/clojure/clojurescript/0.0-1878/clojurescript-0.0-1878.jar from central
Compiling ClojureScript.
Compiling "resources/public/js/modern.js" from ["src/cljs"]...
Successfully compiled "resources/public/js/modern.js" in 6.894774 seconds.
ブラウザを開いて、ローカルファイルのsimple.html
を見てみよう。
全て上手くいっているなら、"Hello, ClojureScipt!"の文字が見えるだろう。
In the next tutorial we're introduce the so called brepl, a browser connected CLJS REPL.
Copyright © Mimmo Cosenza, 2012-2013. Released under the Eclipse Public License, the same as Clojure.