将外部库包含到ClojureScript项目中

Question

我正在尝试在我的新ClojureScript和Reagent应用程序中使用react-beautiful-dnd。根据这里的博客，它说我需要在project.clj文件中使用:foreign-libs来包含文件。

我已经进行了以下配置。

  :cljsbuild
  {:builds {:min
            {:source-paths ["src/cljs" "src/cljc" "env/prod/cljs"]
             :compiler
             {:output-to        "target/cljsbuild/public/js/app.js"
              :output-dir       "target/cljsbuild/public/js"
              :source-map       "target/cljsbuild/public/js/app.js.map"
              :optimizations :advanced
              :foreign-libs [{:file "src/cljs/react-beautiful-dnd/react-beautiful-dnd.js"}]
              :pretty-print  false}}
            :app
            {:source-paths ["src/cljs" "src/cljc" "env/dev/cljs"]
             :figwheel {:on-jsload "toka.core/mount-root"}
             :compiler
             {:main "toka.dev"
              :asset-path "/js/out"
              :output-to "target/cljsbuild/public/js/app.js"
              :output-dir "target/cljsbuild/public/js/out"
              :source-map true
              :optimizations :none
              :pretty-print  true}}



            }
   }

我从这里得到了编译文件，并将其复制到了我的项目中。尽管经过所有这些更改，我仍无法在我的组件中使用DragDropContext或Droppable。

在我的组件中，我已经声明了它们如下：

(def DragDropContext (reagent/adapt-react-class js/DragDropContext))
(def Droppable (reagent/adapt-react-class js/Droppable))

请问有人能帮我理解我在这里做错了什么吗？我收到的错误如下：

Uncaught ReferenceError: DragDropContext is not defined
    at core.cljs?rel=1508832729388:11
(anonymous) @ core.cljs?rel=1508832729388:11

注意：我在foreign-libs中没有添加任何provide属性，因为我不确定包名。而且我不确定是否需要在我的core.cljs组件文件中进行一些:require操作。

- S4beR

---

{btsdaf} - S4beR

Answer 1

我曾经遇到过同样的问题，并找到了解决方法。组件被放在了一个独立的命名空间中，因此必须像这样引用：

(def DragDropContext (reagent/adapt-react-class js/ReactBeautifulDnd.DragDropContext))
(def Droppable (reagent/adapt-react-class js/ReactBeautifulDnd.Draggable))

- YahyaThorsten

Answer 2

你需要添加:provides（你可以选择任何命名空间名称，例如react-beautiful-dnd），然后require它以便加载。由于它依赖于React，所以你应该在requires中指定它（例如，如果你将React作为CLJSJS依赖项包含，则应指定cljsjs.react）：

[{:file "src/cljs/react-beautiful-dnd/react-beautiful-dnd.js"
  :provides ["react-beautiful-dnd"]
  :requires ["cljsjs.react"]}]

并且在你的命名空间中：

(ns my.ns
  (:require
    [cljsjs.react]
    [react-beautiful-dnd]))

- Piotrek Bzdyl

---

{btsdaf} - S4beR

{btsdaf} - Piotrek Bzdyl

是的，它有DragDropContext，但它还有很多其他的东西，我不确定是否正确。我从https://d33wubrfki0l68.cloudfront.net/js/d5f287a23d57e9d42e6e810729077cb5c92ae85c/static/preview.ad7782b059bd6c21ece8.bundle.js复制了这个文件。 - S4beR