如何将ClojureScript包含到HTML页面中？

Question

我正在遵循Web Development With Clojure第三版中的留言簿示例。我正在努力将ClojureScript命名空间包含到HTML文档中。我有一个core.cljs的示例一切正常。对于该文件，只需要做的就是将这段代码包含在home.html文档中：

{% extends "base.html" %}
{% block content %}
<input id="token" type="hidden" value="{{csrf-token}}">
<div id="content"></div>
{% endblock %}
{% block page-scripts %}
{% script "/js/app.js" %}
{% endblock %}

正如我提到的，在这种情况下，一切正常。但是，当我创建其他ClojureScript文件并将其命名为test.cljs并以相同的方式将其包含在名为test.html的新HTML文档中时，我在控制台中看到诸如“目标容器不是DOM元素”之类的错误。我认为这部分有问题：

{% block page-scripts %}
{% script "/js/app.js" %}
{% endblock %}

但是我不知道如何解决这个问题。实际上，我的问题也许应该是：如何将ClojureScript包含到HTML文件中？这是这段代码的唯一方法吗？

{% block page-scripts %}
{% script "/js/app.js" %}
{% endblock %}

或者，也许我应该更改此代码段的{％脚本“ /js/app.js”％}？

甚至更好，当我创建简单的HTML文件而不扩展任何base.html文件时，如何添加clojurescript命名空间，如何引用它？您知道吗，例如javascript helloworld示例

<script src="myscripts.js"></script>

如何在ClojureScript中执行此操作？我正在使用Luminus框架。

Answer 1

[通常，具有ClojureScript支持的Luminus项目会将所有ClojureScript代码编译成单个app.js文件，如project.clj文件的这一部分一样（来自我刚刚用lein new luminus guestbook +h2 +immutant +cljs创建的项目，其中[C0 ]是重要的位）：

+cljs

对于单页应用程序（la Angular或React），这是一个非常方便的默认设置，但我认为您正在考虑的是一个具有不同HTML页面的网站，每个页面都包含一个不同的JavaScript文件（在这种情况下，所有内容都被编译为一个单个JavaScript文件）。

[如果要调用不同的函数（例如，从不同的命名空间中调用），则需要导出它们（以使其可以从JavaScript轻松获得），然后在各自的HTML文件中调用每个函数，如下所示：

                  :cljsbuild{:builds
                   {:app
                    {:source-paths ["src/cljs" "src/cljc" "env/dev/cljs"]
                     :figwheel {:on-jsload "guestbook.core/mount-components"}
                     :compiler
                     {:main "guestbook.app"
                      :asset-path "/js/out"
                      :output-to "target/cljsbuild/public/js/app.js" ;; <= THIS
                      :output-dir "target/cljsbuild/public/js/out"
                      :source-map true
                      :optimizations :none
                      :pretty-print true}}}}

在

...
<!-- in test.html -->
{% script "/js/app.js" %}
<script>
guestbook.test.init();
</script>
...

中

src/cljs/guestbook/test.cljs

此外，请记住重建您的ClojureScript文件。您可以让另一个终端运行以下命令，以便在更改任何ClojureScript文件时重新编译它们：

(ns guestbook.test)

(defn mount-components []
  (let [content (js/document.getElementById "app")]
    (while (.hasChildNodes content)
      (.removeChild content (.-lastChild content)))
    (.appendChild content (js/document.createTextNode "Welcome to the test page"))))

(defn ^:export init []
  (mount-components))