将ClojureScript添加到现有代码库

Question

我有一个相当大的React + Relay代码库,它是使用Webpack构建的.是否有可能以某种方式逐步引入ClojureScript + Reagent？

我正在考虑从代码库中的一些较小的功能组件开始并将它们交换出来.这意味着Reagent组件将以某种方式需要从父级接收道具.

这样做的任何想法或工具？一个快速的Google似乎只会在你的ClojureScript应用程序中找到包含JavaScript库的文章,而不是相反.

Answer 1

您可以创建试剂组件,将其导出,然后将其导入JS代码中.

由于您已经在js项目中拥有webpack/react,因此您需要从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]]]

现在你必须让Reagent认为你刚刚排除的那些反应文件仍在这里.创建这三个文件:

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)))])
             )}))

您的cljsbuild部分project.clj可能如下所示:

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

为了简洁,我只给了你mincljsbuild 的部分.

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.js)从babelification中排除:

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

并在您的JavaScript中,您使用它像这样:

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

是的,babel jsx插件无法识别<comp name="..."/>.这就是调用React.createElement的原因.我没弄清楚如何使它看起来更好,但它的工作原理.