多页应用程序的试剂配置

Question

我的project.clj文件中，包含以下内容：

  :cljsbuild {:builds
              {:app
               {:source-paths ["src/cljs" "src/cljc"]
                :compiler {:output-to "target/cljsbuild/public/js/app.js"
                           :output-dir "target/cljsbuild/public/js/out"
                           :main "my.core"
                           :asset-path "/js/out"
                           :optimizations :none
                           :source-map true
                           :pretty-print true}}}}

我在 list.html 中使用 Selmer，并包含了 app.js。代码如下：

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

在我的list.cljs文件的末尾，我有以下内容：

(r/render [list] (.getElementById js/document "content"))

到目前为止一切都很顺利。

现在，我想要另一个页面，例如detail.cljs，我也希望以类似的方式呈现它。

(r/render [detail] (.getElementById js/document "content"))

问题是，我只有一个名为app.js的文件，将其包含在detail.html中也会在那里呈现列表内容。顺便说一下，我想要一个网址用于list页面，另一个网址用于detail页面。

问题是如何处理？

- Adeel Ansari

Answer 1

使用 shadow-cljs，您可以在构建规范中指定几个具有不同 init-fn 的模块。

您的 shadow-cljs.edn 可能包含以下内容：

{:builds {:client {:target "browser"
                   :modules {:some-page {:init-fn org.example.foo/run}
                             :another-page {:init-fn org.example.bar/run
                                            :depends-on #{:some-page}}}}}}

< p > .js 文件的名称是根据模块名称确定的，这里是 some-page.js 和 another-page.js 。 < /p >

- Svante

---

最理想的情况是您有一个“共享”模块，两个页面都依赖于它。这样每个页面只获取所需的内容。如果您像示例中那样使一个页面依赖于另一个页面，则在访问“:another-page”时将同时执行两个“:init-fn”调用。 - Thomas Heller

Answer 2

过去2年中，使用Deps/CLI工具和Figwheel Main（又名Figwheel 2.0）进行ClojureScript开发比旧的Leiningen方法要容易得多。只需查看figwheel.org上的创建构建页面，然后创建多个*.cljs.edn文件即可。

some-page.cljs.edn
another-page.cljs.edn
...

每个都可以很简单，例如：

{:main some-page.core}

并通过以下方式编译：

clojure -m figwheel.main --build-once some-page

这将生成一个输出文件。

target/public/cljs-out/some-page-main.js

---

请查看 Figwheel 的 代码拆分 文档以及 clojurescript.org 上的 代码拆分。当然，一定要从头开始仔细阅读所有 教程 和 文档。祝愉快！

对于 shadow-cljs，有一个 ClojureScript 代码拆分 示例应用和一个 博客文章。

---

注意：您也可以查看额外主菜单功能，但此功能更为有限。

- Alan Thompson

---

如果您制作了两个完全独立的构建，则用户将不得不为每个页面重新下载所有代码。如果用户可能会访问许多页面，那么最好使用“:modules”来拆分代码，并重复使用共享/缓存的代码，这可以大大减少下载大小。 - Thomas Heller