clojure实战——搭建web前端开发框架(模拟web服务器、推送js修改)

最新推荐文章于 2026-06-25 18:26:50 发布

原创最新推荐文章于 2026-06-25 18:26:50 发布 · 2.5k 阅读

2 ·

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

标签

#cljs #websocket #web前端开发 #框架

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

23 篇文章

订阅专栏

本文介绍了如何使用ClojureScript和figwheel库建立一个Web前端开发框架，通过WebSocket实现实时JS更新。无需部署，借助ClojureScript REPL模拟web服务器，浏览器即可访问本地服务。同时，利用environ库管理环境变量，方便切换开发和发布环境。

直接动手搭建框架吧，闲话留着后面碎碎念~~

1. 框架概述

使用figwheel库，通过websocket将js推送给浏览器。修改ClojureScript之后，不用重新编译打包，就可立即推送到浏览器进行显示。
使用ClojureScript REPL模拟web服务器，不需将网页部署到ngnix等容器中，浏览器即可访问本地web服务。
使用environ库进行环境变量设置，可轻松切换开发/发布环境。

2. 搭建开发框架

（1）project.clj工程文件

(defproject web-test "0.1.0-SNAPSHOT" 
  :description "web前端框架" 
  ;; 资源文件，
  :source-paths ["src/clj" "src/cljs"]
  :dependencies 
            [[org.clojure/clojure       "1.7.0]
             [org.clojure/clojurescript "1.7.170"]

             ;; 构建测试用的服务端
             ;;为ring建立路由通道必备
             [compojure                 "1.4.0"]   
             ;;clojure实现web服务基础框架     
             [ring                      "1.4.0"]    
             ;;ring中间件相关    
             [ring/ring-defaults        "0.1.5"]     

             ;;构建clojure工程    
             [leiningen                 "2.5.3"]    

             ;;异常报告for ring   
             [prone                     "0.8.0"]]       
:plugins [   ;;将clojurescript编译为js的插件
             [lein-cljsbuild "1.1.1"]         
             ;;ring管理                        
             [lein-ring "0.9.0"]
             ;;css/javascript压缩工具                             
             [lein-asset-minifier "0.2.2"]
             ;;
             [lein-figwheel "0.5.0-1"]]           
 :ring {:handler handler/app}
 ; leiningen如果低于这个版本就警告 
 :min-lein-version "2.5.3" 
 :clean-targets ^{:protect false} ["resources/public/js"]
 :cljsbuild {:builds {:exchange {:source-paths ["src/cljs/exchange"]
                      :compiler {:output-to     "resources/public/js/web-test.js"
                                 :output-dir    "resources/public/js/web-test"
                                 :externs     ["resources/public/js/webtest.js"]
                                 :optimizations :none
                                 :pretty-print  true}}}} 
:profiles {:dev {:repl-options {:init-ns handler
                                :nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}
                 :dependencies [[ring-mock "0.1.5"]
                                [ring/ring-devel "1.3.2"]
                                [pjstadig/humane-test-output "0.6.0"]]
                 :plugins [[lein-figwheel "0.4.1"]]
                 :injections [(require 'pjstadig.humane-test-output)
                              (pjstadig.humane-test-output/activate!)]
                 :figwheel {:http-server-root "public"
                            :server-port 8001
                            ;:css-dirs ["resources/public/css"]
                            :ring-handler handler/app}
                 :cljsbuild {:builds {:web-test {:source-paths ["env/dev/cljs/web-test"]
                                                 :compiler {:source-map true}}}}}

          :prod {:cljsbuild {:builds {:exchange {:source-paths ["env/prod/cljs/exchange"]
                                                 :compiler{;;打正式包的时候，要用:optimizations :advanced 以压缩代码大小
                                                          :optimizations :advanced
                                                          ;;false只打一行，压缩代码
                                                          :pretty-print false}}}}}})

各库在github上均有详细介绍，可自行查阅。

（2）详细代码

本部分主要讲解上述工程结构对应文件的内容：

/templates/index.html模板文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link type="text/css" rel="stylesheet" href="css/main.css"/>
    <title>test</title>
</head>
<body>
<div class="actMain" id="j_ActMain"></div>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>

/src/clj/handler.clj文件：
从上面的project.cljs工程文件的figwheel配置项：:ring-handler handler/app可知，执行figwheel后，将执行handler命名空间下的app代码，启动模拟的web服务。

(ns handler
  (:require [compojure.core :refer [GET POST defroutes]]
            [compojure.route :refer [not-found resources]]
            [ring.middleware.defaults :refer [site-defaults wrap-defaults]]
            [prone.middleware :refer [wrap-exceptions]]))
;; 定义ring的路由，render-file解析模板文件
(defroutes routes
           (GET "/*" [] (render-file "templates/index.html" {:dev (env :dev?)}))
           (resources "/")
           (not-found "Not Found"))

(def app
  (-> routes
      ring.middleware.keyword-params/wrap-keyword-params
      ring.middleware.params/wrap-params))

/src/cljs/exchange/core.cljs文件：
该文件是真正的核心cljs文件，即我们需要应用到浏览器的最终文件。

(ns exchange.core)

(defn ^:export init
  "页面入口"
  []
  (.alert js/window (.getElementById js/document "app")))
;页面加载时调用init
(init)

运行figwheel后，修改该文件的init函数，或其调用的函数，保存后会重新编译为js并立马推送到浏览器进行显示。

运行figwheel的命令

lein figwheel

因为在project.clj工程文件中，figwheel是配置在:profile {:dev}下面，所以运行起来时，会执行开发环境下的相关指令（靠配置决定）。