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

Question

我正在关注《Web Development With Clojure》第 3 版中的留言簿示例。我正在努力将 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 文档中时，我在控制台中看到错误，例如 "Target container is not a DOM element." .我认为这部分有问题：

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

但我不知道如何解决这个问题。实际上，我的问题可能应该是：How to include ClojureScript into HTML file?。这段代码是唯一的方法吗？

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

或者，也许我应该更改此代码段的 {% script "/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，其中 +cljs 是重要的位）：

                  :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}}}}

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

如果您想调用不同的函数（例如，从不同的命名空间），您需要导出它们（以便从 JavaScript 中轻松获得它们），然后在各自的 HTML 文件，有点像下面这样：

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

在src/cljs/guestbook/test.cljs

(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))

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

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

How to include ClojureScript into HTML page?

clojurescript