Использование реактивов в реагенте

Question

Я пытаюсь использовать компоненты от http://react-components.com (например, react-youtube) в приложении на основе реагента, но, вероятно, мой наивный подход не является правильным. Я попытался установить пакеты NPM с модулем lein-npm, включить скрипт в html-страницу и использовать их через reagent/adapt-react-class, как в this Вопрос. Но за исключением этого образца я не увенчался успехом.

Обычно я получаю ошибки, такие как «require/import/module is not defined» или «Youtube is undefined» (с помощью (def yt-test [] (r/adapt-react-class js/Youtube)). Я смущен тем, что нужно делать. Я кое-что прочитал о webpack/browsify, saw cljsjs пакеты - это те, которые необходимы для того, чтобы это работало?

Answer 1

Эти компоненты упакованы в модули CommonJS. Один из способов доступа к модулям CommonJS от ClojureScript - объединить их в один файл JavaScript, который может быть включен в вашу сборку ClojureScript.

Вам необходимо создать файл точки входа JavaScript, который требует ваших различных зависимостей NPM и предоставляет их ClojureScript (например, установив их на window). Создайте файл (назовем его index.js), содержащий:

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

Затем используйте инструмент, как Browserify связать файл точки входа и все зависимости требует:

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

Включите bundle.js в вашем ClojureScript build, и вы сможете получить доступ к компоненту React от ClojureScript через js/YouTube

Answer 2

Я написал пошаговое руководство о том, как достичь этого с помощью webpack: blob.tomerweller.com/reagent-import-react-components-from-npm

Общая концепция такого же, как @scttnlsn предложил: связать все пакеты НПХ во внешнем файле JS и подвергать их через глобальную window объекта.