(cljs/run-at(JSVM.:browser)「ちょうど利用できる開発環境を構築する!」)

4770 ワード

前言
前回に続き、clojuresの基本的な文法を理解した後、clojurescript.netでの奇特なエラーを提示した後、私達は心を痛めて地元の開発環境を構築し、その後cljsを深く勉強する必要があります.
既存の構築ツール
ブラウザはJSだけで実行できますので、直接にcljsを実行できません.だから、プリコンパイル環境を構築してJSにコンパイルしてからブラウザで実行します.プリコンパイルはJVMとNodejsの二つの環境にほかならないが、具体的には次のようないくつかの構築ツールがあります.
  • 直接JVMコンパイル
  • リーン方式
  • Bootスキーム
  • Lumoスキーム
  • Shadow-cljs方案
  • cljs/tool方案 の中で、LeinとBootはすべてJVMに基づいて環境をコンパイルするので、上層だけの構築方式は異なっています.Leinはcljsを構築する以外に、cljを構築するためにも用いられます.Bootはcljsの構築に専念する.
  •  LumoはNodejsに基づいて環境をコンパイルします. Shadow-cljsはnode-jreで、nodeモジュールで管理するjvmです.私たちはちょうど利用できる開発環境を構築すればいいので、以下は方案1だけを紹介します.
    一番基礎的なものを構築します.直接JVMコンパイルします.
    ダウンロードの依存
  • Jdk 8.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ファイルに入力します.
    
    
    
        
        
    
    
        <!--    body ,    Browser REPL   
            Uncaught TypeError: Cannot read property 'appendChild' of null
            at goog.net.xpc.CrossPageChannel.<anonymous> (crosspagechannel.js:482)
        -->
        <script src="main.js"/>
    
    </code></pre> 
     <p>             !   ! shell   </p> 
     <pre><code>$ java -cp cljs.jar:src clojure.main project.clj</code></pre> 
     <p>         index.html    console        Hello world! 。<br/>                ,     Clojure      ,     watch.clj   ,    src             !</p> 
     <pre><code>(require '[cljs.build.api :refer [watch]])
    (watch "src"
           {:main 'hello-world.core   ;           
            :output-to "main.js"}) ;           </code></pre> 
     <p>    </p> 
     <pre><code>$ java -cp cljs.jar:src clojure.main watch.clj</code></pre> 
     <p>       ,       !  ,   。        ,       REPL!</p> 
     <h3>  Browser REPL</h3> 
     <p>     rlwrap,     !</p> 
     <p>  repl.clj  </p> 
     <pre><code>(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        </code></pre> 
     <p>  <code>src/hello_world/core.cljs</code>  </p> 
     <pre><code>(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!")</code></pre> 
     <p>    </p> 
     <pre><code>$ rlwrap java -cp cljs.jar:src clojure.main repl.clj</code></pre> 
     <p>         <code>http://localhost:9000/</code>,         index.html  ,     <code>F12</code>      console,  shell           REPL !<br/>     core.cljs       </p> 
     <pre><code>(defn add [& more]
      (reduce + 0 more))</code></pre> 
     <p>   REPL         </p> 
     <pre><code>(require '[hello-word.core :refer [add]])
    (add 1 2 3) ; -> 6</code></pre> 
     <p>    add  multi</p> 
     <pre><code>(defn multi [& more]
      (reduce * 0 more))</code></pre> 
     <p>   REPL           </p> 
     <pre><code>(require '[hello-word.core :refer [multi]] :reload)
    (multi 2 2 3) ; -> 12</code></pre> 
     <p>           cljs    !!!</p> 
     <h2>  </h2> 
     <p>         ,           ?      <code>(require '[cljs.repl :refer [repl]])</code> <code>(require '[cljs.repl :as repl])</code>      ?             !(cljs/run-at (JSVM. :browser) "         ")<br/>    ,       :http://www.cnblogs.com/fsjohn... ^_^  John</p> 
    </div>
                                </div>
                            </div>