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

简介: 书接上一回,在了解cljs基本语法后并在clojurescript.net的奇特错误提示后,我们必须痛定思痛地搭建一个本地的开发环境,以便后续深入地学习cljs。

前言

 书接上一回,在了解cljs基本语法后并在clojurescript.net的奇特错误提示后,我们必须痛定思痛地搭建一个本地的开发环境,以便后续深入地学习cljs。

现有的构建工具

 由于浏览器仅能运行JS,而无法直接运行cljs,因此我们需要搭建一个预编译环境将cljs编译成JS后再在浏览器中运行。预编译无非就是JVM和Nodejs两个环境,但具体使用时有如下几种构建工具。

  1. 直接JVM编译
  2. Lein方案
  3. Boot方案
  4. Lumo方案
  5. Shadow-cljs方案
  6. cljs/tool方案
     其中Lein和Boot都是基于JVM编译环境,只是上层的构建方式有所不同,而Lein除了用于构建cljs外还用于构建clj;而Boot则专注于构建cljs。

 Lumo则是基于Nodejs编译环境。
 Shadow-cljs则是node-jre,就是用node模块管理的jvm。
由于我们只需搭建一个刚好可用的开发环境即可,因此下面只介绍方案1。

搭建一个最基础的——直接JVM编译

下载依赖

  1. Jdk8.0+
  2. 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

目录
相关文章
|
9月前
|
C++ Docker Python
M1 Pro 利用docker 搭建pytho2的开发环境,以vscode连接开发为例
M1 Pro 利用docker 搭建pytho2的开发环境,以vscode连接开发为例
188 0
|
7月前
|
JavaScript
本地 SAP UI5 开发环境里执行 ui5 serve 命令行后失败,该怎么办
本地 SAP UI5 开发环境里执行 ui5 serve 命令行后失败,该怎么办
23 0
|
9月前
|
SQL 关系型数据库 MySQL
Web Terminal环境使用指南
本教程主要介绍如何使用Web Terminal环境,在云服务器ECS上安装并配置MySQL、数据导出与导入和使用简单的SQL语句。
190 0
|
9月前
|
Ubuntu 编译器 网络安全
RK3568开发笔记(七):在宿主机ubuntu上搭建Qt交叉编译开发环境,编译一个Demo,目标板运行Demo测试
在之前的博文中已经搭建好了一个比较完善的ubuntu宿主机,都很完善了但是发现没有Qt交叉编译开发环境,所以还需要搭建一套Qt交叉编译开发环境。
webpack-dev-server不是内部或外部命令,也不是可运行的程序(可用)
webpack-dev-server不是内部或外部命令,也不是可运行的程序(可用)
116 0
webpack-dev-server不是内部或外部命令,也不是可运行的程序(可用)
|
安全 测试技术 Android开发
Win10系统下基于Docker构建Appium容器连接Android模拟器Genymotion完成移动端Python自动化测试
Python自动化,大概也许或者是今年最具热度的话题之一了。七月流火,招聘市场上对于Python自动化的追捧热度仍未消减,那么Python自动化到底能帮我们做些什么呢? 第一,Python自动化可以避免熟练工种的重复工作,对于功能相对完整和成熟的软件,每发布一个新的版本,无论是大版本还是小版本,其中大部分功能和界面都几乎和上一个版本相似或完全相同,但所谓向上兼容,你不能因为新功能的产生而不对老版本功能进行测试工作,而这些老功能又在上一个版本上线时测过,所以这部分功能特别适合于自动化测试,从而可以让测试达到测试每个特征的目的。
Win10系统下基于Docker构建Appium容器连接Android模拟器Genymotion完成移动端Python自动化测试
|
缓存 UED Windows
Biniware Run V6.1.0 快速启动工具中文版
Biniware Run是一款便携式Windows桌面工具,可让您从一个地方快速访问自己喜欢的网站地址,文件和文件夹。只需从桌面拖放任何网站地址,文件或文件夹内的彩色圆圈内,您就可以使用这个方便的软件轻松访问您感兴趣的所有内容。
Biniware Run V6.1.0 快速启动工具中文版
|
缓存 网络协议 安全
开发环境切换Host工具推荐 — SwitchHosts
开发环境切换Host工具推荐 — SwitchHosts
488 0
开发环境切换Host工具推荐 — SwitchHosts
|
负载均衡 Docker 容器
Universal Link配置,如何使用rancher将文件部署到服务器的根目录
Universal Link配置,如何使用rancher将文件部署到服务器的根目录
264 0
Universal Link配置,如何使用rancher将文件部署到服务器的根目录
|
Python
三、如何让pycharm写的东西直接运行(run)而不在Console控制台运行
三、如何让pycharm写的东西直接运行(run)而不在Console控制台运行
三、如何让pycharm写的东西直接运行(run)而不在Console控制台运行