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文件中,这样就可以很方便地进行单元测试。

展开阅读全文

没有更多推荐了,返回首页