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

【问题标题】：How to include ClojureScript into HTML page?如何将 ClojureScript 包含到 HTML 页面中？
【发布时间】：2020-03-21 22:03:01
【问题描述】：

我正在关注《Web Development With Clojure 3rd edition》一书中的留言簿示例。我正在努力将 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 %}

或者，也许我应该更改此 sn-p 的 {% script "/js/app.js" %} 部分？

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

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

如何在 ClojureScript 中做到这一点？我正在使用 Luminus 框架。

【问题讨论】：

请编辑您的问题以包含尽可能多的详细信息：您使用什么工具和命令行来创建项目？你是如何建造它的？此外，尝试直接复制和粘贴任何输出消息。仅从错误来看，它似乎可能与 stackoverflow.com/q/47244575/483566 重复...该错误似乎与格式错误的 HTML 文档有关，而不是与编译后的 JavaScript 有关。

标签： clojurescript

【解决方案1】：

一般来说，支持 ClojureScript 的 Luminus 项目会将所有 ClojureScript 代码编译到单个 app.js 文件中，如 project.clj 文件的这个块（来自我刚刚使用 lein new luminus guestbook +h2 +immutant +cljs 创建的项目，其中 @ 987654324@是重要的位）：

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

对于单页应用程序（例如 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

【讨论】：