ClojureScript

ClojureScript使用npm模块

Javascript现在的生态系统一点也不输Java的生态，而且还在以高速的发展事态占领了企业招聘的热门技术榜单。Javascript社区不仅充满激情、创新，而且非常具有活力，同时也是一个非常开放的社区，从其他的编程语言借鉴了很多优点。 Javascript社区如此丰富的模块与库，作为ClojureScript的使用者也不得不来使用npm的模块。下面简单介绍一下如何在ClojureScript里面使用npm的module，这里用react为例说明如何使用。 Requirement leiningen figwheel cljsbuild React ReactDom Create project lein new figwheel hello-world 直接使用figwheel的templaate来创建项目 Add dependencies 修改project.clj，在cljsbuild修改id为dev的:compiler内容，添加如下代码： :closure-defines {process.env/NODE_ENV "development"} :install-deps true :npm-deps {:react "16.4.1" :react-dom "16.4.1"} id为min的:compiler内容，只是修改了:closure-defines： :closure-defines {process.env/NODE_ENV "production"} :install-deps true :npm-deps {:react "16.4.1" :react-dom "16.4.1"} :closure-defines定义的内容，可以直接在cljs里面进行读取。 Source code ClojureScript代码如下： (ns hello-world.core (:require [react :refer [createElement]] [react-dom :refer [render]])) (enable-console-print!) (js/console.log "Node enviornment is" process.env/NODE_ENV) (def appDiv (.getElementById js/document "app")) (render (createElement "h1" nil "Hello, World!") appDiv) require部分的使用跟cljs的包一样，可以直接从一个包require函数以及对象，剩下的部分就跟js使用react/react-dom的方式一样，调用render函数渲染元素到指定的html节点下面。 Run lein figwheel 使用此命令运行代码，编译完成后figwheel会自动打开浏览器访问：http://localhost:3449/index.html，完成后你会看到下面的内容：

spacemacs配置figwheel环境

0. … clojure和clojurescript不像ruby on rails和django那样all in one的模式，只需要很少的配置就可以建立项目开始开发。clojure系的东西都是library，什么用着顺手就把什么加进来，然后稍做配置再使用。这跟emacs一样，完全私人定制，每个人都有自己的喜欢的extension，这应该是lisp系的习惯吧。所以在使用lisp系的东西的时候没有什么框架能一桶江湖。不过在clojurescript的开发当中figwheel还是少不了的，代码热加载功能太赞了，边写代码边看效果，不需要刷新浏览器，这就是传说的living coding。另外使用集成的IDE工具后，所有东西都有提示，敲两个字母就自动补全了，对于学习一门语言来说的确不是什么好事。闲话不多说，下面来配置一下livind coding的环境，使用spacemacs加上cider，info-clojure两个扩展。了解更多figwheel请查看其github 1. 配置emacs 在spacemacs的配置文件.spacemacs的dotspacemacs-configuration-layers添加clojure dotspacemacs-configuration-layers '(clojure) 另外还需要inf-clojure，由于这个扩展不在spacemacs的layer列表里面，需要另外添加，在dotspacemacs-additional-packages添加即可 dotspacemacs-additional-packages '(inf-clojure) 重启spacemacs或者按SPC-f-e-R执行dotspacemacs/sync-configuration-layers 然后还需要添加一个个启动figwheel的函数，在.spacemacs后面添加下面的函数 (defun figwheel-repl () (interactive) (run-clojure "lein figwheel")) 在后面按c-x c-e执行上面函数的定义 2. 建立项目，修改project.clj 现在新建一个项目叫hello lein new app hello 修改project.clj为如下内容 (defproject hello "0.1.0-SNAPSHOT" :description "FIXME: write description" :url "http://example.com/FIXME" :license {:name "Eclipse Public License" :url "http://www.eclipse.org/legal/epl-v10.html"} :dependencies [[org.clojure/clojure "1.8.0"]] :plugins [[lein-figwheel "0.5.6"]] ;(1) :main ^:skip-aot hello.core :target-path "target/%s" ;;(2) :cljsbuild {:builds [{:id "dev" :source-paths ["src/cljs"] :figwheel true :compiler {:main "hello.core" :asset-path "js/out" :output-to "resources/public/js/app.js" :output-dir "resources/public/js/out"}}]} :profiles {:uberjar {:aot :all}}) 添加了两处： (1) 添加figwheel的支持 (2) 添加cljsbuild配置，这里需要注意的就是:figwheel true这一行，这是在编译的js文件里面添加figwheel的支持。还有:asset-path "js/out"这一行，不然加载google closure library会找不到对应的路径。 ...

ClojureScript学习笔记一（Hello World与REPL）

学习一门编程语言就像新出来的婴儿一样，一个裸体可以看清全部。学习编程语言也是一样的，一开始不可以使用任何一个工具。 ClojureScript继承了Clojure简单和富有表现力的语法，编译后的代码可以运行在浏览器和Node.js上面。编写hello world程序。新建一个目录cljs_first_project，然后还需要建立存放源代码的目录。下载编译器{:target="_blank"}，目录结构如下： cljs_first_project |- build.clj |- cljs.jar |- src |- cljs_first_project |- core.cljs 在core.cljs写入如下内容： (ns cljs-first-project.core) (js/alert "Hello world!") 这段代码定义一个命名空间，然后是一个javascript里面的alert弹出框。另外还需要写一个clojure文件来对源代码进行编译，在根目录下新建一个build.clj文件，内容如下： (require 'cljs.build.api) (cljs.build.api/build "src" {:output-to "out/main.js"}) 包含cljs.build.api命名空间，然后调整build函数，此函数接受两个参数，第一个是ClojureScript源代码目录，第二个是是一个map数据结果，这里指定了输出编译后的js的路径。现在使用前面下载的编译器进行编译： Windows下编译 java -cp "cljs.jar;src" clojure.main build.clj *nix下编译 java -cp cljs.jar:src clojure.main build.clj 编译完成后会在out目录生成main.js，同时还有其他一些目录。要运行main.js还需要一个greet.html，内容如下： <html> <body> <script type="text/javascript" src="out/goog/base.js"></script> <script type="text/javascript" src="out/main.js"></script> <script type="text/javascript"> goog.require("cljs_first_project.core") </script> </body> </html> 用浏览器打开greet.html就可以看到alert框了。第一个ClojureScript编写编译完成！再来一点高级功能，把goog/base.js依赖从html去掉，把goog.require("cljs_first_project")也从html里面去掉，只需要包含main.js就可以让程序跑起来。只需要对build.clj修改一下，内容修改如下： (require 'cljs.build.api) (cljs.build.api/build "src" {:main 'cljs-first-project.core :output-to "out/main.js"}) greet.html的内容如下： ...