(cljs/run-at (JSVM. :browser) 搭建剛好可用的開發環境!) - fsjohnhuang－IT工程師數位筆記本

文章出處

前言

書接上一回，在了解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+
ClojureScript 獨立JAR

創建工程

# 在家目錄下創建工程目錄
$ 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

文章列表