React Starter Kit Main.jsがクライアントに提供されていません

最新のReact Starter Kit（同形）でアプリケーションを構築していますが、問題があります。アプリの多くは静的なデータを持っているので、私は最初にサーバ側のレンダリングだけを使っていくつかのページを作った。React Starter Kit Main.jsがクライアントに提供されていません

しかし、ボタンにonClickコールバックを追加したページを作成したとき、コールバックは決して呼び出されませんでした。

しばらくして、私はそれは、HTML親コンポーネントに以下を追加することによって、仕事を得ることができた：

<script async src="/assets/main.js"></script>

そして、それが必要のような今のページは動作します。しかし、これは適切な解決策ではないと思います。なぜなら、私が "-release"を使ってアプリケーションをビルドすると、main.jsがハッシュタグ（例えば、main.63635afefa6a.js）で生成され、それが見つからないためです。

私はここで何をしないのですか？

出典

2016-08-15 Mark Miller

//それが現在動作しますので、この答えはRSKについて説明しますが、また壊れている可能性がある（RSKのHtmlコンポーネントまたはサーバー側のルーティングを変更した場合、それはあなたの質問から明らかではないが、あなたのアプリ）

はmain.js何ですか？

main.jsは、すべてのJavaScriptがWebPackにバンドルされているため、これを参照するスクリプトタグを強制的に追加すると、リリース以外のビルドでも機能します。

しかし、あなたは--releaseのビルドを使用する必要がありますが--release使用してアプリケーションを構築する場合

...ので、ファイルの内容のハッシュをファイル名に追加されます。これは、コンテンツが変更されたときにファイル名が変更されることを意味します。

古いバージョン（ISPなど）のキャッシュはすべて別の名前のファイル用であるため、更新された名前で更新されたファイルを要求するクライアントは古いバージョンを取得しないことが保証されます。

したがって、どのように正しいmain.js名をハッシュで指定しますか？

Html成分は次のよう<body>にJSX断片を有するべきである：

{script && (
     <script 
     id="source" 
     src={script} 
     data-initial-state={JSON.stringify(state)} 
     /> 
    )}

script変数はmain.jsファイル名が含まれているので、これは使用時ハッシュが含まれると（標準RSKで動作します - - リリースビルド）。この変数の値は、WebPackによって構築されるassets.jsから取得されます。上記のフラグメントでserver.jsからの注入を使用してHtmlコンポーネントに利用できるようになります。

app.get('*', async (req, res, next) => { 
    const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };  
    // ... 
    const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);

出典

2016-08-19 19:44:41 cfogelberg

ありがとうございました。理由のために私はserver.jsを変更したことを覚えていません。しかし、私は自分のHTML、jsを調べました。それは{script &&

React Starter Kit Main.jsがクライアントに提供されていません

答えて

関連する問題