6

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

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

次のようになります。

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src='/js/bundle.js' />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

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

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

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

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src='/js/bundle.{__HASH__}.js' />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

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

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

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

4

3 に答える 3

4

アプリでレンダリングする代わりに、webpack アセットをアプリに渡すのが最善の解決策であることがわかりました。これは、小道具を介して直接行うことも、フラックスを介して行うこともできます。

そうすれば、コードは変数でレンダリングされます。変数の値は、ビルド プロセスには関係ありません。

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src={this.props.jsFile} />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

そんな感じ。

于 2015-05-18T22:32:05.420 に答える