5

我正在尝试在基于 Reagent 的应用程序中使用来自http://react-components.com的组件（例如react-youtube），但我的幼稚方法可能不是正确的方法。我尝试使用lein-npm模块安装 NPM 包，在 html 页面中包含脚本并通过reagent/adapt-react-class在这个SO 问题中使用它们。但是除了这个样本我没有成功。

通常我会收到诸如“require/import/module is not defined”或“Youtube is undefined”之类的错误（通过(def yt-test [] (r/adapt-react-class js/Youtube))。我对需要做什么感到困惑。我阅读了一些关于 webpack/browserify 的内容，看到了 cljsjs 包 - 是那些必需的为了使它工作？

4

2 回答 2

8

我写了一个关于如何使用 webpack 实现这一点的分步指南： blob.tomerweller.com/reagent-import-react-components-from-npm

大体概念与@scttnlsn 建议的相同：将所有npm 包捆绑在一个外部JS 文件中，并通过全局window对象公开它们。

于 2016-06-29T15:52:53.090 回答
3

这些组件被打包为 CommonJS 模块。从 ClojureScript 访问 CommonJS 模块的一种方法是将它们捆绑到一个 JavaScript 文件中，该文件可以包含在您的 ClojureScript 构建中。

您需要创建一个 JavaScript 入口点文件，该文件需要您的各种 NPM 依赖项并将它们公开给 ClojureScript（例如，通过将它们设置为 on window）。创建一个文件（我们称之为index.js），其中包含：

window.YouTube = require('react-youtube');

然后使用Browserify 之类的工具来捆绑您的入口点文件及其所需的所有依赖项：

npm install -g browserify
browserify index.js --standalone window > bundle.js

包含bundle.js在您的 ClojureScript 构建中，您将能够通过 ClojureScript 访问 React 组件js/YouTube

于 2016-03-01T21:35:13.897 回答