Varolan bir codebase'e ClojureScript Ekleme

Question

Webpack kullanılarak oluşturulmuş oldukça büyük bir React + Relay kod tabanım var. ClojureScript + Reaktifi yavaş yavaş bu şekilde içine sokmak mümkün mü?

Kod tabanımızdaki bazı küçük işlevsel bileşenlerle başlamayı ve bunları değiştirmeyi düşünüyordum. Bu, Reaktif bileşeninin bir şekilde ebeveyninden sahne alması gerektiği anlamına gelir.

Bunu yapmak için herhangi bir düşünce ya da kalıp var mı? Hızlı bir Google yalnızca, ClojureScript uygulamanızda JavaScript kitaplıkları dahil olmak üzere etrafındaki makaleleri döndürmek gibi görünüyor.

Answer 1

Bir reaktif bileşeni oluşturabilir, dışa aktarabilir ve ardından JS kodunuza aktarabilirsiniz.

:dependencies [[org.clojure/clojure "1.8.0"] 
       [org.clojure/clojurescript "1.9.229"] 
       [org.clojure/core.async "0.2.391" 
       :exclusions [org.clojure/tools.reader]] 
       [reagent "0.6.0" :exclusions [cljsjs/react cljsjs/react-dom cljsjs/react-dom-server]]] 

Şimdi o yeni hariç tuttuğunuz dosyaları tepki olduğunu düşünerek içine Reaktifini kandırmak zorunda:/sizin js projesinde tepki webpack Zaten beri

, kendi cljs projeden olanlar hariç gerekir hala buradalar. Bu üç dosya oluşturun:

src/cljsjs/react.cljs

(ns cljsjs.react) 

src/cljsjs/tepki/dom.cljs

(ns cljsjs.react.dom) 

src/cljsjs/tepki/dom/server.cljs

Evet, her dosyada ad alanı bildirimi olan bir satır.

reagent_component/core.cljs:

Artık bileşeni yazabilirsiniz

(ns reagent-component.core 
    (:require [reagent.core :as r])) 

(def counter (r/atom 5)) 

(def ^:export test66 
    (r/create-class 
     {:reagent-render 
     (fn [props] 
      (let [{:keys [name]} props] 
       [:div 
        {:on-click (fn [] (swap! counter inc))} 
        name ", I am counting " (clojure.string/join ", " (map inc (range @counter)))]) 
      )})) 

project.clj Your cljsbuild bölüm aşağıdaki gibi görünebilir: purpouse için

:cljsbuild {:builds 
      [{:id   "min" 
       :source-paths ["src"] 
       :compiler  {:output-to  "resources/public/js/compiled/reagent_component_min.js" 
          :output-dir "resources/public/js/compiled/min" 
          :main   reagent-component.core 
          :optimizations :advanced 
          :asset-path "js/compiled/out" 
          }}]} 

Kısacık ben size cljsbuild sadece min bölümünü verdim. WebPart projenize kopyalanması gereken resources/public/js/compiled/reagent_component_min.js dosyasını üretecek

lein cljsbuild once min.

Yeni kayıt ana giriş noktasından önce webpack.config eklenir:

entry: [`${APP_DIR}/reagent_component_min.js`, `${APP_DIR}/main.js`], 

Bu dosya (reagent_component_min.

module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components|reagent_component_min.js)/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['latest'] 
     } 
    } 
    ] 
} 

ve javascript Eğer bu gibi kullanmak: js) babelification dışında tutulmalıdır

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const comp = reagent_component.core.test66; 

const element = <div>Hello, world 
    {React.createElement(comp, {name: 'akond'})} 
</div>; 

ReactDOM.render(
    element, 
    document.getElementById('app') 
); 

Evet, babil JSX eklenti <comp name="..."/> tanımıyor. React.createElement bu yüzden denir. Nasıl daha iyi görüneceğini anlayamadım ama işe yarıyor.