既存のコードベースにClojureScriptを追加する

Question

Webpackを使用して構築されているReact + Relayコードベースがかなりあります。 ClojureScript + Reagentを徐々に導入することが可能ですか？

私は、コードベースの小さな機能コンポーネントのいくつかを使い始め、それらを交換することを考えていました。これは、試薬成分が何らかの形で親から小道具を受け取る必要があることを意味する。

これを行う際の考えやツールはありますか？クイックグーグルだけでは、ClojureScriptアプリでJavaScriptライブラリを含む記事を公開しているようです。

Answer 1

試薬コンポーネントを作成してエクスポートし、JSコードでインポートすることができます。

すでにWebPACKを/あなたのjsプロジェクトに反応していますので、あなたはcljsプロジェクトからのものを除外する必要があります。

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

は今、あなたはそれらがあなただけ除外されたファイルを反応させることを考えることに試薬を誘導しなけれまだここにいる。これらの3つのファイルを作成します。

の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) 

はい、各ファイル内に名前空間宣言がある1行だけです。

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セクションは次のようになります。purpouseについては

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

簡潔さのために私はcljsbuildのminセクションのみを与えました。

lein cljsbuild once minは、resources/public/js/compiled/reagent_component_min.jsファイルを生成します。ファイルはWebpackプロジェクトにコピーする必要があります。

新しいエントリは、あなたのメインエントリポイントの前に、あなたのwebpack.configに追加されます。

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

このファイル（reagent_component_min。

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

をし、あなたのJavaScriptで、あなたはこのようにそれを使用します：JS）babelificationから除外すべき

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が呼び出されます。私はそれをより良く見えるようにする方法を理解していませんでしたが、それは機能します。