2

Node.js で Om を使用して HTML を生成できるかどうかを調べています。ClojureScript を Node.js で実行することができました。どうやらReact を Node.js で実行できるようです。基本ガイドに従って、次のようにLeiningenプロジェクトを作成します

lein new figwheel om-tut -- --om

次のように起動するように project.clj ファイルを変更しました

(defproject om-tut "0.1.0-SNAPSHOT"
  :description "FIXME: write this!"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}

  :dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-2850"]
                 [figwheel "0.2.5-SNAPSHOT"]
                 [org.clojure/core.async "0.1.346.0-17112a-alpha"]
                 [sablono "0.3.4"]
                 [org.omcljs/om "0.8.8"]]

  :plugins [[lein-cljsbuild "1.0.4"]
            [lein-figwheel "0.2.5-SNAPSHOT"]
            [lein-npm "0.4.0"]]

  :source-paths ["src"]

  :clean-targets ^{:protect false} ["resources/public/js/compiled" "out/server" "out/server/om_tut.js"]

  :cljsbuild {
    :builds [{:id "dev"
              :source-paths ["src" "dev_src"]
              :compiler {:output-to "resources/public/js/compiled/om_tut.js"
                         :output-dir "resources/public/js/compiled/out"
                         :optimizations :none
                         :main om-tut.dev
                         :asset-path "js/compiled/out"
                         :source-map true
                         :source-map-timestamp true
                         :cache-analysis true }}
             {:id "min"
              :source-paths ["src"]
              :compiler {:output-to "resources/public/js/compiled/om_tut.js"
                         :main om-tut.core                         
                         :optimizations :advanced
                         :pretty-print false}}
             {:id "server"
              :source-paths ["src"]
              :compiler {
                :main pow.core
                :output-to "out/server/om_tut.js"
                :output-dir "out/server"
                :optimizations :simple
                :target :nodejs
                :cache-analysis true
                :source-map "out/server/om_tut.js.map"}}]}

そしてcore.cljsをに変更しました

(ns ^:figwheel-always om-tut.core
    (:require[om.core :as om :include-macros true]
              [om.dom :as dom :include-macros true]))

(enable-console-print!)

(println "Edits to this text should show up in your developer console.")

;; define your app data so that it doesn't get over-written on reload

(defonce app-state (atom {:text "Hello world!"}))

(defn render [data owner]
  (reify om/IRender
    (render [_]
      (dom/h1 nil (:text data)))))

(om/root
  render
  app-state
  {:target (. js/document (getElementById "app"))})

(defn -main []
  om.dom/render-to-str (render app-state nil))

(set! *main-cli-fn* -main)

プロジェクトは、次のコマンドを使用して正常にコンパイルされます

lein cljsbuild once server

しかし、Windowsのcmdシェルからそのように生成出力を実行しようとすると

node out\server\om_tut.js

私は得る

    ...\om-tut\out\server\om_tut.js:40237
om.dom.input = om.dom.wrap_form_element.call(null, React.DOM.input, "input");
                                                   ^
ReferenceError: React is not defined
    at Object.<anonymous> (...\om-tut\out\server\
om_tut.js:40237:52)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

未定義の React オブジェクトは、生成された om_tut.js ファイルの 37532 行目に存在し、ロードされているはずの ...\om-tut\out\react.inc.js ファイルに由来すると思われます。

cljs.core.load_file("react.inc.js");

何がうまくいかないのかについてのアイデアはありますか?

4

3 に答える 3

0

あなたの現在の問題は、構成の調整を解決すると確信している React モジュールのロードに関するものですが、Node.js で呼び出すことはできませんom.core/root。om.core/rootReact コンポーネントを DOM にマウントしますが、Node にはありません。必要なのは、コンポーネントを定義し、それらに静的データを渡してから呼び出すことですReact.renderToString( https://facebook.github.io/react/docs/top-level-api.html#react.rendertostring )。Om でラップしrender-to-strます。

(def static-data {:text "Hello world!"})

(defn title-component [data owner]
  (reify om/IRender
    (render [_]
      (dom/h1 nil (:text data)))))

(def component-html-as-string
  (dom/render-to-str (title-component static-data)))

Om の価値のほとんどは、サーバー側のレンダリングには必要ない状態処理機能に由来します (そのため、 を省略しatomました)。ClojureScript での React テンプレート作成が必要な場合は、静的 html 用の関数と.NET よりも優れたテンプレート生成構文を備えたSablonoを参照することをお勧めします。om.dom

また、Nodeで開発するならmies-nodeから始めた方が良い

于 2015-05-12T17:32:03.280 に答える