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

有一个 hacky 解决方案，涉及两个单独的构建管道以获得 Framework7 up 和运行ning 在一个简单的 shadow-cljs 示例项目中。

我创建了一个显示两个版本的 a test project，非工作的 clojurescript 版本，发生错误的地方可以是运行 by:

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 文件。

.css shadow-cljs 不支持导入。

Answer 2

尽管我读了 shadow-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]))

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

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

How to integrate Framework 7 with shadow-cljs and clojurescript

clojurescript

html-framework-7

shadow-cljs