前言
?書接上一回,在了解cljs基本語法后并在clojurescript.net的奇特錯誤提示后,我們必須痛定思痛地搭建一個本地的開發(fā)環(huán)境,以便后續(xù)深入地學習cljs。
現(xiàn)有的構(gòu)建工具
?由于瀏覽器僅能運行JS,而無法直接運行cljs,因此我們需要搭建一個預編譯環(huán)境將cljs編譯成JS后再在瀏覽器中運行。預編譯無非就是JVM和Nodejs兩個環(huán)境,但具體使用時有如下幾種構(gòu)建工具。
直接JVM編譯
Lein方案
Boot方案
Lumo方案
Shadow-cljs方案
cljs/tool方案
?其中Lein和Boot都是基于JVM編譯環(huán)境,只是上層的構(gòu)建方式有所不同,而Lein除了用于構(gòu)建cljs外還用于構(gòu)建clj;而Boot則專注于構(gòu)建cljs。
?Lumo則是基于Nodejs編譯環(huán)境。
?Shadow-cljs則是node-jre,就是用node模塊管理的jvm。
?由于我們只需搭建一個剛好可用的開發(fā)環(huán)境即可,因此下面只介紹方案1。
搭建一個最基礎(chǔ)的——直接JVM編譯
下載依賴
Jdk8.0+
創(chuàng)建工程
# 在家目錄下創(chuàng)建工程目錄$ mkdir -p ~/hello_world/src/hello_world/# 復制cljs.jar文件到工程目錄下$ cp ~/cljs.jar ~/hello_world/# 創(chuàng)建項目配置文件$ touch ~/hello_world/build.clj# 創(chuàng)建源碼文件$ touch ~/hello_world/src/hello_world/core.cljs# 創(chuàng)建HTML文件$ touch ~/hello_world/index.html
在build.clj
文件中輸入
(require '[cljs.build.api :refer [build]]) (build "src" {:main "hello-world.core" ; 指定程序入口命名空間 :output-to "out/main.js"}) ; 指定目標代碼所在文件
在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> <script src="out/main.js"></script></head><body></body></html>
現(xiàn)在到了最激動人心的一刻了!編譯君!在shell中執(zhí)行
$ java -cp cljs.jar:src clojure.main project.clj
然后打開瀏覽器訪問index.html就可以在console中看到那句熟悉的Hello world!了。
?現(xiàn)在每次修改代碼后均要編譯一下,要知道啟動Clojure是那么的漫長,所以我新增watch.clj的配置,讓它監(jiān)控src文件的變化來實現(xiàn)自動編譯吧!
(require '[cljs.build.api :refer [watch]]) (watch "src" {:main "hello-world.core" ; 指定程序入口命名空間 :output-to "out/main.js"}) ; 指定目標代碼所在文件
然后運行
$ java -cp cljs.jar:src clojure.main watch.clj
就會自動編譯了,是不是舒心多了!等等,還不夠。對于快速開發(fā)而言,我們還需要一個REPL!
搭建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 "out/main.js"});; 配置REPL(repl (repl-env) :watch "src" ; REPL自動監(jiān)控src目錄下的cljs文件 :output-dir "out") ; REPL重用build函數(shù)已編譯的文件
修改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/repl
,這時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
?現(xiàn)在我們可以繼續(xù)深入cljs的學習咯?。?!
總結(jié)
?開發(fā)環(huán)境搭建好了,那接下來要從哪里入手呢?大家是不是對(require '[cljs.repl :refer [repl]])
和(require '[cljs.repl :as repl])
等有些疑惑呢?后面我們就從命名空間開始吧!(cljs/run-at (JSVM. :browser) "命名空間就這么簡單")
尊重原創(chuàng),轉(zhuǎn)載請注明來自:http://www.cnblogs.com/fsjohnhuang/p/7087902.html ^_^肥仔John
如果您覺得本文的內(nèi)容有趣就掃一下吧!捐贈互勉!
??
http://www.cnblogs.com/fsjohnhuang/p/7087902.html