(cljs / Run-at (JSVM.: browser) " build a just available development environment! ")

Preface

Last time, after understanding the basic grammar of cljs and the strange error prompt of clojurescript.net, we must painfully build a local development environment for further study of cljs.

Existing build tools

Because browsers can only run JS, but can not run cljs directly, we need to build a precompiled environment to compile cljs into JS and then run in browsers. Pre-compiling is nothing more than JVM and Nodejs environments, but there are several building tools for specific use.
1. Direct JVM compilation
2. Lein scheme
3. Boot scheme
4. Lumo programme
5. Shadow-cljs scheme
6. cljs/tool scheme
Lein and Boot are based on the JVM compilation environment, but the upper layer is different. Lein is used to build cljs as well as clj, while Boot is focused on building cljs.
Lumo is based on Nodejs compilation environment.
Shadow-cljs is node-jre, which is jvm managed by node module.
Since we only need to build a development environment that is just available, we will only introduce scenario 1 below.

Build a most basic -- direct JVM compilation

Download dependency

Jdk8.0+
ClojureScript stand-alone JAR # # # # Create a Project uuuuuuuuuuu

# Create Project Catalogue under Home Catalog
$ mkdir -p ~/hello_world/src/hello_world/

# Copy the cljs.jar file to the project directory
$ cp ~/cljs.jar ~/hello_world/

# Create project profile
$ touch ~/hello_world/build.clj

# Create source files
$ touch ~/hello_world/src/hello_world/core.cljs

# Create HTML files
$ touch ~/hello_world/index.html

Enter in the build.clj file

(require '[cljs.build.api :refer [build]])
(build "src"
       {:main 'hello-world.core   ; Specify the program entry namespace
        :output-to "main.js"}) ; Specify the file where the target code entry is located
;; Note: The target code for the rest of the dependent modules is generated by default in out/lower

Enter in src/hello_world/core.cljs file

(ns hello-world.core)

; Standard output redirection to js/console.log
(enable-console-print!)

(println "Hello world!")

Enter in the index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--Must be placed in body Chinese, otherwise build Browser REPL Time report
        Uncaught TypeError: Cannot read property 'appendChild' of null
        at goog.net.xpc.CrossPageChannel.<anonymous> (crosspagechannel.js:482)
    -->
    <script src="main.js"></script>
</body>
</html>

Now it's the most exciting moment! Compile! Execute in the shell

$ java -cp cljs.jar:src clojure.main project.clj

Then open the browser and visit index.html to see the familiar Hello world in console.
Now every time I modify the code, I have to compile it. To know how long it takes to start Clojure, so I add watch.clj configuration, let it monitor the changes of src files to achieve automatic compilation.

(require '[cljs.build.api :refer [watch]])
(watch "src"
       {:main 'hello-world.core   ; Specify the program entry namespace
        :output-to "main.js"}) ; Specify the file where the target code is located

Then run

$ java -cp cljs.jar:src clojure.main watch.clj

It will compile automatically. Is it more comfortable? Wait, that's not enough. For rapid development, we also need a REPL!

Building Browser REPL

First install a rlwrap, which will be used later!

Added repl.clj file

(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"})

;; To configure REPL
(repl (repl-env)
      :watch "src"       ; REPL Automatic monitoring src Directory cljs file
      :output-dir "out") ; REPL reusing build Function compiled file

Modify src/hello_world/core.cljs file

(ns hello-world.core
 (:require [clojure.browser.repl :as repl]))

;; start-up Browser REPL
(defonce conn
 (repl/connect "http://localhost:9000/repl"))

(enable-console-print!)

(println "Hello world!")

Then run

$ rlwrap java -cp cljs.jar:src clojure.main repl.clj

Then open the browser to visit http://localhost:9000/, when the browser visits the index.html page, and then we press F12 to open the console of the browser, then the shell will have our favorite REPL!
At this point, we add the following code to core.cljs

(defn add [& more]
  (reduce + 0 more))

Then load the namespace in REPL

(require '[hello-word.core :refer [add]])
(add 1 2 3) ; -> 6

Then change add to multi

(defn multi [& more]
  (reduce * 0 more))

Then reload the namespace in REPL

(require '[hello-word.core :refer [multi]] :reload)
(multi 2 2 3) ; -> 12

Now we can continue to study cljs in depth!!!

summary

The development environment has been built, so where do we start next? Are there any doubts about (require'[cljs. repl: refer [repl]) and (require' [cljs. repl: as repl])? Let's start with the namespace. (cljs/run-at (JSVM.:browser) "Namespaces are as simple as that")
Respect for originality, reprint from: http://www.cnblogs.com/fsjohnhuang/p/7087902.html John Fatty Boy uuuuuuuuuuuuu

Posted by guxin1999 on Thu, 20 Dec 2018 03:09:06 -0800

Programmer Group