前言
书接上一回,在了解cljs基本语法后并在clojurescript.net的奇特错误提示后,我们必须痛定思痛地搭建一个本地的开发环境,以便后续深入地学习cljs。
现有的构建工具
由于浏览器仅能运行JS,而无法直接运行cljs,因此我们需要搭建一个预编译环境将cljs编译成JS后再在浏览器中运行。预编译无非就是JVM和Nodejs两个环境,但具体使用时有如下几种构建工具。
- 直接JVM编译
- Lein方案
- Boot方案
- Lumo方案
- Shadow-cljs方案
- cljs/tool方案
其中Lein和Boot都是基于JVM编译环境,只是上层的构建方式有所不同,而Lein除了用于构建cljs外还用于构建clj;而Boot则专注于构建cljs。
Lumo则是基于Nodejs编译环境。
Shadow-cljs则是node-jre,就是用node模块管理的jvm。
由于我们只需搭建一个刚好可用的开发环境即可,因此下面只介绍方案1。
搭建一个最基础的——直接JVM编译
下载依赖
- Jdk8.0+
-
创建工程
# 在家目录下创建工程目录
$ mkdir -p ~/hello_world/src/hello_world/
# 复制cljs.jar文件到工程目录下
$ cp ~/cljs.jar ~/hello_world/
# 创建项目配置文件
$ touch ~/hello_world/build.clj
# 创建源码文件
$ touch ~/hello_world/src/hello_world/core.cljs
# 创建HTML文件
$ touch ~/hello_world/index.html
在build.clj
文件中输入
(require '[cljs.build.api :refer [build]])
(build "src"
{:main 'hello-world.core ; 指定程序入口命名空间
:output-to "main.js"}) ; 指定目标代码入口所在文件
;; 注意:其余依赖模块的目标代码默认会生成在out/下
在src/hello_world/core.cljs
文件中输入
(ns hello-world.core)
; 标准输出重定向到js/console.log
(enable-console-print!)
(println "Hello world!")
在index.html
文件中输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--必须放在body中,否则搭建Browser REPL时会报
Uncaught TypeError: Cannot read property 'appendChild' of null
at goog.net.xpc.CrossPageChannel.<anonymous> (crosspagechannel.js:482)
-->
<script src="main.js"></script>
</body>
</html>
现在到了最激动人心的一刻了!编译君!在shell中执行
$ java -cp cljs.jar:src clojure.main project.clj
然后打开浏览器访问index.html就可以在console中看到那句熟悉的Hello world!了。
现在每次修改代码后均要编译一下,要知道启动Clojure是那么的漫长,所以我新增watch.clj的配置,让它监控src文件的变化来实现自动编译吧!
(require '[cljs.build.api :refer [watch]])
(watch "src"
{:main 'hello-world.core ; 指定程序入口命名空间
:output-to "main.js"}) ; 指定目标代码所在文件
然后运行
$ java -cp cljs.jar:src clojure.main watch.clj
就会自动编译了,是不是舒心多了!等等,还不够。对于快速开发而言,我们还需要一个REPL!
搭建Browser REPL
首先安装个rlwrap,后面会用到!
新增repl.clj文件
(require '[cljs.build.api :refer [build]]
'[cljs.repl :refer [repl]]
'[cljs.repl.browser :refer [repl-env]])
(build "src"
{:main 'hello-world.core
:output-to "main.js"})
;; 配置REPL
(repl (repl-env)
:watch "src" ; REPL自动监控src目录下的cljs文件
:output-dir "out") ; REPL重用build函数已编译的文件
修改src/hello_world/core.cljs
文件
(ns hello-world.core
(:require [clojure.browser.repl :as repl]))
;; 启动Browser REPL
(defonce conn
(repl/connect "http://localhost:9000/repl"))
(enable-console-print!)
(println "Hello world!")
然后运行
$ rlwrap java -cp cljs.jar:src clojure.main repl.clj
然后打开浏览器访问http://localhost:9000/
,这时浏览器访问的是index.html页面,然后我们按F12
打开浏览器的console,那么shell中就会有我们心仪已久的REPL了!
这时我们在core.cljs中追加下面代码
(defn add [& more]
(reduce + 0 more))
然后在REPL中加载这个命名空间
(require '[hello-word.core :refer [add]])
(add 1 2 3) ; -> 6
然后再将add改成multi
(defn multi [& more]
(reduce * 0 more))
然后在REPL中重新加载这个命名空间
(require '[hello-word.core :refer [multi]] :reload)
(multi 2 2 3) ; -> 12
现在我们可以继续深入cljs的学习咯!!!
总结
开发环境搭建好了,那接下来要从哪里入手呢?大家是不是对(require '[cljs.repl :refer [repl]])
和(require '[cljs.repl :as repl])
等有些疑惑呢?后面我们就从命名空间开始吧!(cljs/run-at (JSVM. :browser) "命名空间就这么简单")
尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/7087902.html ^_^肥仔John
如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!