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

最新推荐文章于 2026-05-22 10:27:41 发布

原创最新推荐文章于 2026-05-22 10:27:41 发布 · 2.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web前端开发 #clojure #figwheel

clojure实践积累专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用clojure和figwheel快速搭建一个精简的web前端开发框架，简化了之前模拟后台的复杂过程，强调了直接在数据模型中模拟数据的效率，并详细讲解了project.clj配置、文件目录结构以及cljs与cljc文件的使用。

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"