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


    前言

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

  • 相关阅读:
    09课堂问题整理
    08课堂问题整理
    Eclipse开发工具的编码问题
    【伸手党】需要我帮你Google/百度吗?
    IDEA更改左侧目录层级结构
    IDEA设置类和方法的注释
    一篇系列
    "Notice: unserialize(): Error at offset xx of xxx bytes"错误的处理(转载)
    git push命令每次都要输入用户名和密码的问题处理
    在网站添加qq客服功能
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/7087902.html
Copyright © 2020-2023  润新知