在 clojurescript 项目中包含外部库答案

【问题标题】：include foreign libs in clojurescript project在 clojurescript 项目中包含外部库
【发布时间】：2017-10-24 08:27:22
【问题描述】：

我正在尝试在我的新 ClojureScript 和 Reagent 应用程序中使用 react-beautiful-dnd。根据博客here，它说我需要在我的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}}



            }
   }

我从here 获得了已在我的项目中复制的编译文件。尽管经过所有这些更改，我仍然无法在我的组件中使用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。

【问题讨论】：

我找到了react-beautiful-dnd 的替代方案。它在cljsjs.github.io 中列为[cljsjs/dragula "3.6.8-1"]。以非常相似的方式工作。

标签： javascript reactjs clojurescript reagent react-dnd

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你需要添加:provides（你可以选择任何你想要的ns名称，例如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]))

【讨论】：

我通过添加一个随机包名（甚至是你提到的那个）来尝试这个，但我仍然得到同样的错误。
能否请您检查react-beautiful-dnd.js 文件是否包含您尝试引用的全局变量（例如js/DragDropContext）？
是的，它有DragDropContext，但它还有很多其他的东西，我不确定它们是否正确。我从d33wubrfki0l68.cloudfront.net/js/…复制了文件