Clojure: Devcards: 将主应用程序分离

Question

Clojure: Devcards: 将主应用程序分离

clojure

3

情况

我正在使用Clojure + Figwheel + Devcards。 https://www.youtube.com/watch?v=G7Z_g2fnEDg

一切都很好，但有以下问题：

我可以原型化我的应用程序的 UI 组件。但是，我不希望我的完整应用程序在一个 card 中。

因此，特别地，我想要以下内容：

localhost:8000/cards.html <-- 显示所有命名空间和 Devcards localhost:8000/app.html <-- 不显示任何 Devcards；不显示 Devcards 的目录；只运行我的应用程序

问题:

如何设置这样的环境？几乎所有我所读到的都是关于如何使用 Devcards，而不是如何设置 Devcards 与主应用程序区分开来。

谢谢！

- eav db

2个回答

3

我将尽力完成此次翻译任务。

我如何通过仅进行一次构建来解决这个问题：

1）在 HTML 中创建一个全局变量，用于指示是否需要加载Devcards：

<script type="text/javascript">
  var showDevcards = true; // or false
</script>

2) 在您的初始ClojureScript命名空间中，请检查此变量：

(if js/showDevcards
   (devcards/init!)
   (init!)) ;; what you had previously

- Michiel Borkent

你能否判断如果这不会增加:advanced构建的大小，那么showDevcards是否为真？ - nha

1

@nha 我有两个不同的初始文件，一个用于开发环境，另一个用于生产环境。在开发过程中，我会加载 src-cljs-dev 源目录，而在构建时则加载 src-cljs-prod 目录。这两个目录都包含稍微调整过的 ClojureScript 命名空间。Devcards 仅在开发过程中存在。请参考此示例：https://github.com/borkdude/lein2boot - Michiel Borkent

感谢您抽出时间回答！我接受了其他答案，因为(1)它更早 (2)我正在使用lein，以及(3)它有效。然而，这个解决方案的简洁性令人惊叹，我越来越想使用Boot。[Lein似乎太神奇了。] - eav db

这与Boot无关，使用Leiningen也可以实现同样的功能。也许我不应该提到Boot。事实上，我已经删除了它的引用。 - Michiel Borkent

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cfrick · Accepted Answer

这已经是devcards模板的默认设置了（例如，lein new devcards my-app）。

在你的project.clj中有多个构建。其中一个是用于devcards的（注意不同的路径和figwheel配置）。dev基本上是默认设置。（此代码来自模板）：

 ; ...
 :builds [{:id "devcards"
           :source-paths ["src"]
           :figwheel { :devcards true  ;; <- note this
                      ;; :open-urls will pop open your application
                      ;; in the default browser once Figwheel has
                      ;; started and complied your application.
                      ;; Comment this out once it no longer serves you.
                      :open-urls ["http://localhost:3449/cards.html"]}
           :compiler { :main       "xxx.core"
                      :asset-path "js/compiled/devcards_out"
                      :output-to  "resources/public/js/compiled/xxx_devcards.js"
                      :output-dir "resources/public/js/compiled/devcards_out"
                      :source-map-timestamp true }}
          {:id "dev"
           :source-paths ["src"]
           :figwheel true
           :compiler {:main       "xxx.core"
                      :asset-path "js/compiled/out"
                      :output-to  "resources/public/js/compiled/xxx.js"
                      :output-dir "resources/public/js/compiled/out"
                      :source-map-timestamp true }}
           ;...

现在您需要两个不同的HTML文件。一个是您已经在使用的（cards.html），另一个是您的app.html（或模板使用的index.html）。它们会被加载：

<script src="/js/compiled/xxx_devcards.js" type="text/javascript"></script>

另一方面：

<script src="/js/compiled/xxx.js" type="text/javascript"></script>

请注意，这两个来自:output-to。

使用lein figwheel dev devcards运行此设置。在浏览器中打开索引和卡片。享受吧。

实际上更好的做法可能是将它们分开一点。您可以通过为您的:main使用不同的ns - 或者您可以使用多个:source-paths来实现此目的。