क्लोजरस्क्रिप्ट को मौजूदा कोडबेस

Question

में जोड़ना मेरे पास एक उचित रूप से बड़ा रिएक्ट + रिले कोडबेस है जिसे वेबपैक का उपयोग करके बनाया जा रहा है। क्या किसी भी तरह से क्लोजरस्क्रिप्ट + अभिकर्मक को धीरे-धीरे पेश करना संभव है?

मैं अपने कोड बेस में कुछ छोटे कार्यात्मक घटकों से शुरू करने और उन्हें स्वैप करने के बारे में सोच रहा था। इसका मतलब यह होगा कि अभिकर्मक घटक किसी भी तरह माता-पिता से प्रोप प्राप्त करने की आवश्यकता होगी।

ऐसा करने के आसपास कोई विचार या टूलिंग? एक त्वरित Google केवल आपके क्लोजरस्क्रिप्ट ऐप में जावास्क्रिप्ट लाइब्रेरी समेत लेखों को चालू करने लगता है, न कि दूसरी तरफ।

Answer 1

आप एक अभिकर्मक घटक बना सकते हैं, इसे निर्यात कर सकते हैं, और फिर इसे अपने जेएस कोड में आयात कर सकते हैं।

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

अब आप यह सोच कर कि उन फ़ाइलों को आप सिर्फ बहिष्कृत करने के बाद प्रतिक्रिया में अभिकर्मक चाल करने के लिए है:

के बाद से आप पहले से ही webpack/अपने js परियोजना में प्रतिक्रिया है, तो आप अपने cljs परियोजना से उन बाहर करने की आवश्यकता अभी भी यहाँ हैं इन तीन फाइलों बनाएँ:

src/cljsjs/react.cljs

(ns cljsjs.react) 

src/cljsjs/प्रतिक्रिया/dom.cljs

(ns cljsjs.react.dom) 

src/cljsjs/प्रतिक्रिया/dom/server.cljs

(ns cljsjs.react.dom.server) 

हां, प्रत्येक फ़ाइल में नेमस्पेस घोषणा के साथ केवल एक पंक्ति।

reagent_component/core.cljs:

अब आप अपने घटक लिख सकते हैं

(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 में आपका cljsbuild अनुभाग इस प्रकार दिखाई देंगे:

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

purpouse के लिए ब्रेवटी के मैंने आपको क्लोज्सबिल्ड के केवल min अनुभाग दिए हैं।

lein cljsbuild once minresources/public/js/compiled/reagent_component_min.js फ़ाइल का उत्पादन करेगा, जिसे आपके वेबपैक प्रोजेक्ट में कॉपी किया जाना चाहिए।

नई प्रविष्टि अपने मुख्य प्रवेश बिंदु से पहले अपने webpack.config में जोड़ा जाता है:

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

इस फ़ाइल (reagent_component_min।जे एस) babelification से बाहर रखा जाना चाहिए:

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

और अपने जावास्क्रिप्ट में आप इसे इस तरह का उपयोग करें:

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') 
); 

हाँ, कोलाहल jsx प्लगइन <comp name="..."/> नहीं पहचानता है। यही कारण है कि React.createElement कहा जाता है। मुझे यह नहीं पता था कि इसे बेहतर कैसे दिखाना है, लेकिन यह काम करता है।