包括clojurescript项目中的外国文库

时间:2017-10-24 08:27:23

标签: javascript reactjs clojurescript reagent react-dnd

我正在尝试在我的新ClojureScript和react-beautiful-dnd应用程序中使用Reagent。根据博客here,它表示我需要在:foreign-libs文件中使用project.clj包含该文件。

我已将其配置如下

  :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}}



            }
   }

我从我在项目中复制的here获得了编译文件。虽然在完成所有这些更改后,我仍然无法在我的组件中使用DragDropContextDroppable

在我的组件中,我已将它们声明为

(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

注意:由于我不确定包,我在provide中未添加任何foreign-libs属性。此外,我不确定是否需要在:require组件文件中执行core.cljs

2 个答案:

答案 0 :(得分:1)

您需要添加:provides(您可以选择您想要的任何名称,例如react-beautiful-dnd),然后添加require,以便加载它。由于它取决于React,您应该在requires中指定它(例如cljsjs.react如果您将React包含为CLJSJS依赖项):

[{: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]))

答案 1 :(得分:1)

我遇到了同样的问题并找到了解决方案。这些组件被放在一个单独的命名空间中,因此必须像这样引用:

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