如何使用Figwheel和Leiningen构建多页ClojureScript应用？

我有一个通过Leiningen构建的简易Figwheel应用，希望为其配置多页面架构：

• index.html调用hello-figwheel.core的代码
• page2.html调用hello-figwheel.page2的代码

我判断需要修改project.clj文件，现有compiler配置如下：

:compiler {:main hello-figwheel.core
           :asset-path "js/compiled/out"
           :output-to "resources/public/js/compiled/hello_figwheel.js"
           :output-dir "resources/public/js/compiled/out"
           :source-map-timestamp true
           :preloads [devtools.preload]}

请问如何配置Leiningen，才能实现如下编译规则：

• 将hello-figwheel.core编译输出到resources/public/js/compiled/hello_figwheel.js
• 将hello-figwheel.page2编译输出到resources/public/js/compiled/page2.js

已有类似问题，但本场景的差异点为使用Leiningen运行Figwheel。

更新1 #

我已将如下配置添加到project.clj文件中：

{
                :id "page2"
                :source-paths ["src"]
                :compiler {
                           :output-dir "resources/public/js/compiled/page2"
                           :output-to "resources/public/js/compiled/page2/main.js"
                           :main hello-figwheel.page2
                           :asset-path "js/compiled/out"
                           :source-map-timestamp true
                           :preloads [devtools.preload]}

                :figwheel {:on-jsload "hello-figwheel.page2/on-js-reload"
                           :open-urls ["http://localhost:3449/page2.html"]}
                }

但运行lein figwheel时，REPL无法连接到Web应用，界面一直提示Prompt will show when Figwheel connects to your application，无后续响应。此外，在浏览器打开http://localhost:3449/page2.html后，修改page2.cljs代码并刷新页面，修改内容未生效。

解决方法 #

你需要调整:cljsbuild下的构建配置，同时修正路径冲突问题，操作步骤如下：

1. 调整project.clj的:cljsbuild配置结构，将单构建拆分为两个独立构建项，示例如下：

:cljsbuild {:builds
            [{:id "core"
              :source-paths ["src"]
              :compiler {:main hello-figwheel.core
                         :asset-path "js/compiled/out"
                         :output-to "resources/public/js/compiled/hello_figwheel.js"
                         :output-dir "resources/public/js/compiled/out"
                         :source-map-timestamp true
                         :preloads [devtools.preload]}
              :figwheel {:on-jsload "hello-figwheel.core/on-js-reload"
                         :open-urls ["http://localhost:3449/index.html"]}}
             {:id "page2"
              :source-paths ["src"]
              :compiler {:main hello-figwheel.page2
                         :asset-path "js/compiled/page2/out"
                         :output-to "resources/public/js/compiled/page2.js"
                         :output-dir "resources/public/js/compiled/page2/out"
                         :source-map-timestamp true
                         :preloads [devtools.preload]}
              :figwheel {:on-jsload "hello-figwheel.page2/on-js-reload"}}]}

2. 启动Figwheel时指定要运行的两个构建，执行命令：lein figwheel core page2
3. 检查两个HTML文件的JS引入路径是否匹配输出配置：
   • index.html引入<script src="js/compiled/hello_figwheel.js"></script>
   • page2.html引入<script src="js/compiled/page2.js"></script>
4. 确认hello-figwheel.page2命名空间下已经定义了on-js-reload函数，即使是空实现也需要存在，否则热重载逻辑会失效。

原配置出错原因 #

1. page2构建的asset-path和core构建重复，导致Figwheel客户端无法正确加载对应编译资源，REPL连接失败
2. 运行lein figwheel时没有指定构建ID，默认仅启动第一个构建，page2的代码不会被编译也不会被监听修改
3. page2的输出路径和你预期的目标路径不符，导致HTML引入的JS文件没有更新

内容的提问来源于stack exchange，提问作者Glory to Russia