(cljsrun-at (JSVM. :browser) "搭建刚好可用的开发环境!")

xiaoxiao2023-07-21 135

前言

书接上一回，在了解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>  <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

相关资源：jd_seckill京东抢茅台插件最新版【京东飞天茅台1499抢购】Python脚本的完整安装使用教程

最新回复(0)

(cljsrun-at (JSVM. :browser) &quot;搭建刚好可用的开发环境!&quot;)

前言