ClojureScript学习笔记一（Hello World与REPL）

学习一门编程语言就像新出来的婴儿一样，一个裸体可以看清全部。学习编程语言也是一样的，一开始不可以使用任何一个工具。

ClojureScript继承了Clojure简单和富有表现力的语法，编译后的代码可以运行在浏览器和Node.js上面。

编写hello world程序。新建一个目录cljs_first_project，然后还需要建立存放源代码的目录。下载编译器{:target="_blank"}，目录结构如下：

cljs_first_project
|- build.clj
|- cljs.jar
|- src
    |- cljs_first_project
        |- core.cljs

在core.cljs写入如下内容：

1
2


(ns cljs-first-project.core)
(js/alert "Hello world!")

这段代码定义一个命名空间，然后是一个javascript里面的alert弹出框。另外还需要写一个clojure文件来对源代码进行编译，在根目录下新建一个build.clj文件，内容如下：

1
2


(require 'cljs.build.api)
(cljs.build.api/build "src" {:output-to "out/main.js"})

包含cljs.build.api命名空间，然后调整build函数，此函数接受两个参数，第一个是ClojureScript源代码目录，第二个是是一个map数据结果，这里指定了输出编译后的js的路径。现在使用前面下载的编译器进行编译：

Windows下编译

java -cp "cljs.jar;src" clojure.main build.clj

*nix下编译

java -cp cljs.jar:src clojure.main build.clj

编译完成后会在out目录生成main.js，同时还有其他一些目录。要运行main.js还需要一个greet.html，内容如下：

1
2
3
4
5
6
7
8
9


<html>
  <body>
    <script type="text/javascript" src="out/goog/base.js"></script>
    <script type="text/javascript" src="out/main.js"></script>
    <script type="text/javascript">
      goog.require("cljs_first_project.core")
    </script>
  </body>
</html>

用浏览器打开greet.html就可以看到alert框了。第一个ClojureScript编写编译完成！

再来一点高级功能，把goog/base.js依赖从html去掉，把goog.require("cljs_first_project")也从html里面去掉，只需要包含main.js就可以让程序跑起来。只需要对build.clj修改一下，内容修改如下：

1
2
3
4
5


(require 'cljs.build.api)
(cljs.build.api/build
  "src"
  {:main 'cljs-first-project.core
  :output-to "out/main.js"})

greet.html的内容如下：

1
2
3
4
5


<html>
  <body>
    <script type="text/javascript" src="out/main.js"></script>
  </body>
</html>

打开greet.html，效果跟之前一样。

另外一个高级功能是当编辑源代码的时候不需要手动多次编译，另外在根目录下再写一个watch.clj文件，内容如下：

1
2
3
4
5


(require 'cljs.build.api)
(cljs.build.api/watch
  "src"
  {:main 'cljs-first-project.core
  :output-to "out/main.js"})

只是把调用build的地方改成调用watch函数即可。运行java -cp "cljs.jar;src" clojure.main watch.clj（*nix运行java -cp cljs.jar:src clojure.main watch.clj），此时若修改源文件core.cljs，编译器会自动检测到文件的修改，然后自动进行编译，自动编译后在浏览器刷新即可看到效果。

既然是lisp系，怎么可以少得了REPL(Read-Eval-Print-Loop)。REPL可以让我们直接把代码片段推送到浏览器运行，只需要在REPL里面写上代码，然后立马可以在浏览器看到效果，这个Live Codiing的基础。

同样的要想运行repl也需要clojure的支持，在根目录下新建一个repl.clj，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


(require 'cljs.repl)
(require 'cljs.build.api)
(require 'cljs.repl.browser)
    
(cljs.build.api/build
  "src"
  {:main 'cljs-first-project.core
   :output-to "out/main.js"
   :verbose true})
    
(cljs.repl/repl
  (cljs.repl.browser/repl-env)
  :watch "src"
  :output-dir "out")

调整的build函数还是没有变，后面添加一个cljs.repl/repl函数调用。·cljs.repl.browser/repl-env·这个函数定义了一些默认配置，比如打开一个9000端口作为http的服务端口。cljs.repl/repl函数作了下面几件事情：

监听源代码的修改
编译修改的源代码
监听9000端口提供http服务
打开一个prompt等待输入

修改core.cljs内容如下：

1
2
3
4
5
6
7


(ns cljs-first-project.core
  (:require [clojure.browser.repl :as repl]))
    
(defonce conn
  (repl/connect "http://localhost:9000/repl"))
    
(js/alert "Hello world!")

可以看到这里初始化了一个connection，连接到9000端口的/repl，这里使用defonce是只初始化一次，之后的每次修改都不再连接服务端的REPL。

Ok再来运行repl.clj

java -cp "cljs.jar;src" clojure.main repl.clj

*unix

java -cp cljs.jar:src clojure.main repl.clj

第一编译需要等待一小会，因为需要编译源代码启动http服务，最后会输出等待浏览器连接的提示：

Waiting for browser to connect ...

现在用浏览器打开http://localhost:9000/greet.html，浏览器会显示一个Hello world!的弹出框。这时候命令行会出现一个输入的提示符，如下：

Watch compilation log available at: out\watch.log
To quit, type: :cljs/quit
cljs.user=>

输入(js/alert "Hello World From REPL!")回车，浏览器就是看到这段代码的效果。

文章目录