日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2024/4/14 javascript 47 豆豆
生活随笔 收集整理的這篇文章主要介紹了 (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

?書接上一回，在了解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><!--必須放在body中，否則搭建Browser REPL時會報Uncaught TypeError: Cannot read property 'appendChild' of nullat 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/fsjohn... ^_^肥仔John

    總結

    以上是生活随笔為你收集整理的(cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。