zoukankan      html  css  js  c++  java
  • (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

  • 相关阅读:
    第二章 存储,2.1 永不停止的脚步——数据库优化之路(作者:佳毅)
    第一章 基础设施,1.3 阿里视频云ApsaraVideo是怎样让4000万人同时狂欢的(作者:蔡华)
    第一章 基础设施,1.2 双11背后基础设施软硬结合实践创新(作者:希有)
    第一章 基础设施,1.1 万亿交易量级下的秒级监控(作者:郁松、章邯、程超、癫行)
    阿里巴巴2016双11背后的技术(不一样的技术创新)
    java实现Haffman编码
    CentOS7安装Nginx并部署
    ubuntu usb权限问题解决
    Camera图像处理原理及实例分析-重要图像概念
    sensor的skipping and binning 模式
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/7087902.html
Copyright © 2011-2022 走看看