如何将 Framework 7 与 shadow-cljs 和 clojurescript 集成

Question

当我尝试在clojurescript项目中初始化Framework7和Framework7-React时，使用shadow-cljs，我得到这样的错误：

f7.js:31 Uncaught TypeError: Framework7 is not a constructor
at Object.init (f7.js:31)
at F7App.value (app.js:162)
at commitLayoutEffects (react-dom.development.js:21965)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackImpl (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at commitRootImpl (react-dom.development.js:25025)
at exports.unstable_runWithPriority (scheduler.development.js:816)
at runWithPriority$2 (react-dom.development.js:12189)
at commitRoot (react-dom.development.js:24866)

Framework7 初始化通常只包含以下内容

// Import Framework7
import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
// Import Framework7-React Plugin
import Framework7React from 'framework7-react';
// Import Framework7 Styles
import 'framework7/css/framework7.bundle.css';
// Init F7 React Plugin
Framework7.use(Framework7React);

有一个黑客解决方案，涉及两个单独的构建管道以获得 Framework7 在一个简单的 shadow-cljs 示例项目中启动并运行。

我创建了一个测试项目，该项目显示了两个版本，即非工作 clojurescript 版本，发生错误的地方可以通过以下方式运行：

npx shadow-cljs watch :direct-no-webpack

它使用client2.cljs

工作版本使用 ES6 导入语法初始化 Framework7，并使用 webpack 进行转译。

yarn run build-dev
npx shadow-cljs watch :direct

它会产生上述错误。

我不明白，由于涉及多个包装器，Framework7 中到底发生了什么。

如何正确导入和使用带有 Clojurescript 和 Shadow-CLJS 的 Framework7？

Answer 1

我对 Framework7 一无所知，但通常最好只遵循最基本的说明。在这种情况下，我没有添加额外的构建配置，只是直接需要包。

(ns foo.bar
(:require
["framework7" :as f7]
["framework7-react" :as f7r]))
;; avoiding top-level side-effects because of hot-reload
(defn init []
(.use f7 f7r))

我无法判断这是否真的有效，但它没有抛出错误。避免直接访问".esm.js"文件，因为如果您访问这些文件，但"framework7-react"访问不同的文件，可能会导致冲突。目前还不支持混合 CommonJS 和 ESM 文件。

shadow-cljs不支持.css导入。

Answer 2

即使我阅读了有关如何使用 npm 包的 shadow-clj 指南。我不得不使用node_modules目录中Javascript文件的直接路径。

正确的导入是：

(ns app.ui.client2
(:require
["framework7/framework7-lite.esm.bundle.js" :default Framework7]
["framework7-react/framework7-react.esm.js" :default Framework7React]))

我修改了问题中提到的测试项目。