問題タブ [isomorphic-javascript]

ブラウザーとサーバーの両方で実行される同形の React アプリケーションがあります。2 つの異なるエントリ ポイントと異なる構成で 2 つの別個の Webpack ビルドを実行することで、両方に同じコードをビルドします。

問題は、外部スクリプト タグ (この例では Google マップ) を介してブラウザ ウィンドウに存在する外部ファイルが、サーバー上のノードで実行されている場合、明らかに存在しないことです。コードは、エントリ ポイント ファイルを除いて同じです。

index.html:

簡素化された構成:

コンポーネント:

私の質問は、これをどのように処理すればよいですか?

私は現在、まったく熱心ではない解決策を持っています。

私はreact/flux/react-routerと、サーバーでの仮想DOMの事前レンダリングがどのように行われるかを研究しています。サーバーで and を呼び出すRouter.run()とrenderToString、サーバーでページが事前にレンダリングされ、残りの .js ファイルがクライアントに遅延ロードおよびダウンロードされます。React-router は、あらゆるシナリオ (クライアントまたはサーバー)でUI URLを処理します。これは、サーバーのREST API URLと必ずしも同じではありません。

REST機能を備えたネイティブアプリのバックエンドも使用したい場合、ルート機能を追加するためのベストプラクティスは何ですか? Express.js のルート定義の完全なセットを用意し、react-routes のすべてのルートも再定義する必要がありますか?

React ルートは、必ずしも Express ルートと似ているとは限りません (ルート パターンが多い場合も少ない場合もあります)。したがって、ルート定義の複製は避けられないようです。あれは正しいですか？この例でも同じことをしているようです。

ルート定義またはもっと DRY を再利用する方法を見つけたいと思っていました。

同形アプリケーションを構築しています。完全にreactで構築されています。つまり、htmlベースもreactに含まれています。

ルート html をアプリ コンポーネントとして持っています。

次のようになります。

プロジェクトを webpack でビルドするときは、js/bundle.js を置き換えてハッシュを含める必要があります。

Webpack は、終了後に stats.json を配信します。しかし、ビルド時にハッシュを利用できるようにする必要があります。

機能フラグを使用して次のようなことを行うことを考えていました:

理想的には、ビルドされた js に正しいハッシュ参照を挿入します。

自己参照なので、少しトリッキーです。それを行うより良い方法はありますか？webpack が終了した後にビルドされたコードを変更することは、逆効果のようです。また、クライアントが bundle.js を要求するだけで、ノード サーバーにハッシュ ファイルを提供させることも考えました。

このキャッシングの適切な解決策は何でしょうか?

Javascript が拡大し続け、Web 開発のほとんどのレイヤーをカバーするにつれて、Isomorphic JS (クライアント側またはサーバー側のいずれかで実行できるソフトウェアを作成する) が Web アプリの新しいパラダイムとして成長しています。

利点は明らかですが、サーバー側のレンダリングは同型の重要な機能の 1 つです。

私はそれをあまりいじっていませんが、本番プロジェクトに実装したいと思っています。

問題は、Node.js は大きなプロジェクトのサーバー側をレンダリングするのに十分なほど成熟しているかということです。落とし穴は見つかりましたか？保守性はどうですか？

Koaに、react-routerから受け取ったhtml文字列を同形でレンダリングさせようとしています。

これが私が機能させようとしてきたコードです：

サーバー.js

ルート.js

main.js

いくつかのエラーが発生します:

警告: コンポーネント(...):render返されたコンポーネント インスタンスにメソッドが見つかりません: コンポーネントで定義するのを忘れたrenderか、型が React コンポーネントではない関数である要素を誤ってレンダリングしようとした可能性があります。

警告: React 要素の props プロパティを設定しないでください。代わりに、要素を最初に作成するときに正しい値を指定してください。

TypeError: プロパティ コンテキストを追加できません。オブジェクトは拡張可能ではありません

警告: 何かが React コンポーネントを直接呼び出しています。代わりにファクトリまたは JSX を使用してください。参照: https://fb.me/react-legacyfactory

私はES6をES5に変換しています。

1. NodeJS Express サーバー ファイル用の BabelJS と、ディレクトリ build/server/ へのサーバー側レンダリング出力。
2. build/client/bundle.js ファイルへの ReactComponents 出力の Browserify + babelify

build/client/bundle.js から build/server/ ファイルに React コンポーネントをインポートしようとすると、トランスパイルされていない ReactComponent をインポートしているため、アプリがクラッシュします。

サーバーでコードを複製せずに (client/bundle.js のコードを再利用して) ReactComponent をインポートするにはどうすればよいですか?

webpackの構成内のプラグインセクションを使用して、ノードサーバー(エクスプレス)と一緒にwebpack devサーバーを適切に使用することができました。

それはすべて正常に動作しますが、今は同型になり、高速アプリケーション内でクライアント側のコンポーネントを使用しようとしています。

これまでのところ、私が遭遇している唯一の問題は、webpack がサーバー側のコードを「解析」しないと、コンポーネントが必要であるがパスが解決されないという状況になることです。

IE

コンポーネントの内部

別の方法で webpack を構成する必要がありますか、それともすべてのインポートを有効なサーバー側に変更する必要がありますか?

実際の状態を確認したい場合に備えて、コードベースはこちらhttps://github.com/vshjxyz/es6-react-flux-node-quickstart