如何在 ClojureScript 中使用 React 库

Question

我正在尝试在我的 re-frame / reagent / leiningen 项目中使用 cljsjs/vis，但是得到将此库导入命名空间时出错。

cljsjs/vis in namespace required but not available

曾尝试使用其他库进行 charts/data 可视化，但结果仍然相同。将 JS 库导入 clojurescript 项目似乎有问题。

leiningen project.cljs 文件

(defproject test1 "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.10.1"]
                 [org.clojure/clojurescript "1.10.764"
                  :exclusions [com.google.javascript/closure-compiler-unshaded
                               org.clojure/google-closure-library
                               org.clojure/google-closure-library-third-party]]
                 [thheller/shadow-cljs "2.9.3"]
                 [reagent "0.10.0"]
                 [re-frame "0.12.0"]
                 [cljs-ajax "0.7.5"]
                 [cljsjs/vis "4.21.0-1"]]

  :plugins [[lein-shadow "0.2.0"]

            [lein-shell "0.5.0"]]

  :min-lein-version "2.9.0"

  :source-paths ["src/clj" "src/cljs"]

  :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]


  :shell {:commands {"open" {:windows ["cmd" "/c" "start"]
                             :macosx  "open"
                             :linux   "xdg-open"}}}

  :shadow-cljs {:nrepl {:port 8777}

                :builds {:app {:target :browser
                               :output-dir "resources/public/js/compiled"
                               :asset-path "/js/compiled"
                               :modules {:app {:init-fn test1.core/init
                                               :preloads [devtools.preload]}}

                               :devtools {:http-root "resources/public"
                                          :http-port 8280
                                          }}}}

  :aliases {"dev"          ["with-profile" "dev" "do"
                            ["shadow" "watch" "app"]]
            "prod"         ["with-profile" "prod" "do"
                            ["shadow" "release" "app"]]
            "build-report" ["with-profile" "prod" "do"
                            ["shadow" "run" "shadow.cljs.build-report" "app" "target/build-report.html"]
                            ["shell" "open" "target/build-report.html"]]
            "karma"        ["with-profile" "prod" "do"
                            ["shadow" "compile" "karma-test"]
                            ["shell" "karma" "start" "--single-run" "--reporters" "junit,dots"]]}

  :profiles
  {:dev
   {:dependencies [[binaryage/devtools "1.0.0"]]
    :source-paths ["dev"]}

   :prod {}

}

  :prep-tasks [])

cljs 文件

(ns my-project
  (:require [cljsjs.vis]))

Answer 1

shadow-cljs 不支持 CLJSJS 包。相反，您安装原始的 npm 包，这些 CLJSJS 包代表并直接使用它。

所以不用

(ns my-project
  (:require [cljsjs.vis]))

;; accessing vis via js/WhateverGlobalItUses

你会

(ns my-project
  (:require ["vis-network" :as vis]))

;; then use "vis" directly

npm 版本被拆分成多个独立的 packages，所以只要包含你想使用的任何内容即可。

shadow-cljs docs explain using npm packages is much more detail. There is also an older example repo 使用 vis-network。

如何在 ClojureScript 中使用 React 库

How to use use React libraries in ClojureScript

clojurescript

reagent

re-frame