JSONをReact/Node/Expressユニバーサルアプリケーションにロードしていますが、バンドルしていません

Question

React/Node/Expressを使用するのがかなり新しいので、私はkytをボイラープレートとして選択しました。作業するファイルの基本セット。私はデフォルトのReactスターターkytを使用しています。

私の仕事は、CMSからダンプされたJSONの束を取ってそれをReactサイトにすることです。

これを行うには、このJSONファイルのデータを「経路」に取り込む必要があります。私は以下に掲載されたコードを使用しましたが、これは素晴らしいです。しかし、ここで問題となるのは、JSONの「インポート」は、データがwebpackによってバンドルにコンパイルされたことを意味します。これは、CMSがJSONファイルを更新するまで有効です。その時点でbundle.jsは更新されません（CMSのアップデートのたびにバンドルを再コンパイルするコードを書いていない限り、それは私のサウンドが気に入らない）古いものをレンダリングします。

私が必要とするのは、コンパイル時にではなく、実行時にJSONファイルをロードするコードです。

誰でも私をここに向けることができますか？私は、AJAX/axiosリクエストを含むたくさんのものを試しましたが、何も動作していないようです。私はWebpackの 'System.import'機能が私の試したことに役立つかもしれないが、コンパイルしたバンドルに自分のデータをバンドルすることも読んでいます。

import React from 'react'; 
import Route from 'react-router/lib/Route'; 
import IndexRoute from 'react-router/lib/IndexRoute'; 

import App from '../components/App.js'; 
import Home from '../components/Home.js'; 
import Standard from '../components/Standard.js'; 
import Listing from '../components/Listing.js'; 
import FourOhFour from '../components/FourOhFour.js'; 

// THIS IS THE PROBLEM - I don't want this to be bundled 
import Model from '../app-json/model.json'; 

const componentRegistry = { 
    "Home": Home, 
    "Standard": Standard, 
    "Listing": Listing, 
    "FourOhFour": FourOhFour 
} 


function buildDynamicRoutes(config){ 
    var routeJSX = []; 
     Object.keys(Model.posts).map((key) => { 
      var thisComponent = ''; 
      if(Model.posts[key].template === 'page-listings.php'){ 
       thisComponent = 'Listing'; 
      } else if(Model.posts[key].template === ''){ 
       thisComponent = 'Standard'; 
      } 
      routeJSX.push(
       <Route path={Model.posts[key].route} components={componentRegistry[thisComponent]} key={key} /> 
      ); 
     }); 
     return routeJSX; 
} 

const routes = (
    <Route path="/" component={App}> 
     <IndexRoute component={Home} /> 
     { buildDynamicRoutes() } 
     <Route path="*" component={FourOhFour}/> 
    </Route> 
); 

export default routes; 

Answer 1

更新：

同じことをやってますが、サーバー側は同様に簡単です。私は以下のようにリモートでホストするか、requestのようなライブラリを使用するか、またはノードhttpライブラリをビルドしてリモートファイルの内容を取得することもできます。

また、CMSファイルをダンプするときに、ファイルをランダムなリモートファイルストアに格納する代わりに、レンダリングを行うサーバーに配置し、ノードのfsライブラリを使用してディスクからファイルを読み取ることができます。

どちらの場合でも、JSONデータを解析してコンポーネントにフィードする必要があります。リアクトコードはWebPACKのでコンパイルされたときに

1. ロードJSON：

   ---

   あなたは、フロントエンドのコードで作業しているので、あなたは二つの選択肢を持っています。これは今起こっていることです。

2. リアクションコードがブラウザで実行されるときにJSONをロードします。これは、静的なファイルストレージ（S3と似ていますが、多くの選択肢があります）にJSONエクスポートをホストし、コンポーネントのマウント時にAJAXを使用してJSONファイルをロードして解析することで実行できます。

これは、これを行う方法を説明する別の回答です。

https://stackoverflow.com/a/14388512/4697675

あなたはおそらく、あなたのコンポーネントの状態にJSONファイルをロードし、それにレンダリングすることをお勧めします。これにより、AJAX呼び出しが完了する前に、データなしでレンダリングすることができます。