博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
(cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")
阅读量:7031 次
发布时间:2019-06-28

本文共 2812 字,大约阅读时间需要 9 分钟。

前言

 书接上一回,在了解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. 创建工程

# 在家目录下创建工程目录$ 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文件中输入

    

现在到了最激动人心的一刻了!编译君!在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) "命名空间就这么简单")

尊重原创,转载请注明来自: ^_^肥仔John

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

分类:
 
本文转自 博客园博客,原文链接: ,如需转载请自行联系原作者
你可能感兴趣的文章
腾讯携手中科院国家天文台落地FAST 用云计算探索星辰大海
查看>>
随机森林算法4种实现方法对比测试:DolphinDB速度最快,XGBoost表现最差
查看>>
详解前端异步编程的六种方案
查看>>
红帽论坛北京站召开 设立亚太开放创新实验室
查看>>
苏宁11.11:如何基于异步化打造会员任务平台?
查看>>
区块链和数据科学:如果同时应用这两种技术,将会实现什么?
查看>>
Oracle即将发布的全新Java垃圾收集器 ZGC
查看>>
深入浅出Tensorflow(三):训练神经网络模型的常用方法
查看>>
Blazor将.NET带回到浏览器
查看>>
利用人工智能提升团队包容性
查看>>
详解分布式系统本质:“分治”和“冗余”
查看>>
gRPC-Web发布,REST又要被干掉了?
查看>>
全站爬虫项目一阶段总结
查看>>
在项目中引入领域驱动设计的经验
查看>>
用关系型NoSQL回到未来
查看>>
Jeff Bean谈Flink与流式处理的5大新发现
查看>>
技术寡头争霸传之:控制开源工具,就控制了整个生态
查看>>
微软把UWP定位成业务线应用程序开发平台
查看>>
2018腾讯云+未来峰会互联网专场:腾讯云智能物联解决方案亮相
查看>>
Python数据可视化的10种技能
查看>>