clojure实战——快速搭建web前端开发框架

clojure实战——快速搭建web前端开发框架

之前写过一篇类似的文章，搭建web前端开发框架(模拟web服务器、推送js修改)，感觉讲的还是有点复杂，因为将模拟后台的开发也放进去了，但在使用clojurescript+reagent的实际生产过程中，发现后台模拟其实是没有多大用处的。很多时候为了模拟后台程序而花时间写一些代码，而且一旦有所变动，又得修改代码，重启figwheel，花费不少时间。反倒不如直接在数据模型model中，模拟一些数据更有效率。

因此，这篇文章就去繁从简，以自己的实际小项目为例，搭建一个最精简的clojurescript前端开发框架。

一、project.clj文件文配置

(defproject portable-exchange "1.0.0-SNAPSHOT"
:description "test web"

:url "http://test.xxx.com/index.html"

:dependencies [[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.293"]]

:plugins [[lein-cljsbuild "1.1.4"]
[lein-figwheel "0.5.8" :exclusions [org.clojure/clojure]]]

:min-lein-version "2.7.1"

:source-paths ["src"]

:clean-targets ^{:protect false} ["resources/public/portable/js"]

:cljsbuild {:builds {:portable-exchange {:source-paths ["src"]
:compiler     {:output-to  "resources/public/portable/js/portable-exchange.js"
:output-dir "resources/public/portable/js/portable-exchange"
:asset-path "js/portable-exchange"}}}}

:profiles {:dev  {:cljsbuild {:builds {:portable-exchange {:compiler {:optimizations :none
:main          "portable-exchange.main"
:pretty-print  true}
:figwheel true}}}
:figwheel  {:http-server-root "public"
:server-port      8083
:css-dirs         ["resources/public/portable/css"]}}
:prod {:cljsbuild {:builds {:portable-exchange {:compiler {:optimizations :advanced
:main          "portable-exchange.main"
:pretty-print  false}}}}}})

; TOPUBLISH  "lein with-profile prod cljsbuild once"

如上述，通过打包命令为：lein with-profile prod cljsbuild once。可以讲cljs打包为js文件。

二、文件目录

在上述project.clj文件中，存在一些类似 “resources/public/portable/js/portable-exchange”的目录路径，这里讲我工程的目录结构贴出来，大家可以一一对照。



主要参考一下resources和src的目录结构就好，其他请忽略。

这样配置好之后，启动figwheel：

lein figwheel

在浏览器中输入

http://localhost:8083/index.html

就能实时看到你编写的web程序的效果了！

三、cljs文件与cljc文件

在上面的目录中，你可以看到不仅存在.cljs结尾的文件，也可以看到以.cljc结尾的文件。你可以将一些需要测试的、纯逻辑性的东西写在在.cljc文件中，这样就可以很方便地进行单元测试。