Как интегрировать Framework 7 с shadow-cl js и clojurescript - PullRequest
Новая
       50

Как интегрировать Framework 7 с shadow-cl js и clojurescript

0 голосов
/ 29 января 2020

Когда я пытаюсь инициализировать Framework7 и Framework7-React в проекте clojurescript, используя shadow-cl js, я получаю такие ошибки: 

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-cl js.

Я создал тестовый проект , который показывает обе версии, нерабочая версия clojurescript, в которой возникает ошибка, может быть запущена: 

npx shadow-cljs watch :direct-no-webpack

Используется client2.cljs

Рабочая версия инициализирует Framework7 с использованием синтаксиса импорта ES6 и передается с помощью веб-пакета. 

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

Выдает вышеупомянутую ошибку.

Я не понимаю подробно, что именно происходит в Framework7, поскольку задействованы несколько оболочек.

Как правильно импортировать и использовать Framework7 с Clojurescript и Shadow-CL JS? * 1 024 *

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Несмотря на то, что я прочитал инструкцию shadow-clj по использованию npm пакетов . Мне пришлось использовать прямой путь к Javascript -файлам в каталоге node_modules.

Правильный импорт: 

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

Я изменил тестовый проект, упомянутый в моем вопросе .

0 голосов
/ 29 января 2020

Я ничего не знаю о Framework7, но обычно лучше просто следовать самым основным c инструкциям. В этом случае я не добавил никакой дополнительной конфигурации сборки и просто запросил пакеты напрямую. 

(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-реагирует" - к другим. Смешивание общих JS и ESM файлов в настоящее время не поддерживается.

.css импорт не поддерживается shadow-cljs.

...