clojure: devcards:分离主应用程序

Question

情况

我用的是clojure +小方格+ devcards。g2fnEDg

除了以下问题外，一切都很好：

• 我可以原型UI组件的我的应用程序。然而，我不希望我的整个应用程序在卡内。 因此，我想特别指出以下几点：

localhost:8000/chars.html <--向我展示我的所有名称空间+ devcards localhost:8000/app.html <--不要向我展示任何devcards；不要向我显示devcards的目录；只需运行我的应用程序

问题：

我怎么弄到这个装置？我所读到的几乎所有东西都是关于如何使用开发卡，而不是如何设置单独的开发卡与主应用程序的区别。

谢谢!

Answer 1

这几乎是开发卡模板(例如lein new devcards my-app)的默认设置。

在您的project.clj中有多个构建。一个用于开发卡(注意不同的路径和配置)。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来做到这一点。

Answer 2

我是如何用一个构建来解决这个问题的：

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