如何将Framework7与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);

有一个很好的解决方案，它涉及两个独立的构建管道，以便在一个简单的影子-cljs示例项目中启动和运行Framework7。

我创建了一个显示两个版本的a test project，即出现错误的非工作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

即使我读了影子-clj guidelines on how to use npm packages。我必须使用node_modules目录中Javascript文件的直接路径。

正确的导入是：

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

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

Answer 2

我对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导入。