データをwebpackバンドルされたjavascriptからhtmlにブートストラップ

Question

最近、Realsアプリケーションをglobals-everywhereのscript-tag-per-js-file設定から束ねたwebpackアプリに変換しました。

しかし、アプリでは、元々、スクリプト内のグローバルinit関数を公開してから、Scala Playバックエンドから生成されたhtmlサーバーで呼び出しを呼び出しました。今私のjavascriptの同梱（そして最終的にuglified /縮小さ）されていることを

// ComponentPage.scala.html 
... 
<script> 
    $(() => initComponent(@scala.serverVariable.getData(currentUser)) 
</script> 

、私が知っているScalaのバックエンドのためにどのような方法を持っていない：インスタンス

// Component.js 
class MyComponent extends React.Component { 
    render() { 
     <div> {this.props.myData} </div> 
    } 
} 
initComponent(data) { 
    ReactDOM.render(
     <MyComponent myData={data} /> 
    ) 
} 

そして、バックエンドにあるためコールする関数の名前/最終的な名前。特定の機能をグローバルに保つようにwebpackに指示する方法はありますか？サーバ側のデータを反応コンポーネントにブートストラップするためのより良いパターンがありますか？

は、ここで私が考えられてきた二つのアプローチです：

• が、私はそれがスピナーだし、サーバへのAJAX呼び出しが正しいデータを取得するためのロード/完全なスタイルのコンポーネント、作ることもできますが、以来、私は既にレンダリング時に利用可能なデータを持っていますが、クライアントからサーバーへの余分な往復を余儀なくされることはありません。
• 私は、データ属性を持つタグにデータを含めることができますし、それをDocumentReadyでフェッチすることができますが、シリアライズ/デシリアライゼーションは複雑なオブジェクトには限界があり、これはかなりハッキリです。

Answer 1

windowオブジェクトに関数を添付するだけです。これにより、名前のマングリングが防止されます。

window.initComponent = function(data) { 
    ReactDOM.render(
    <MyComponent myData={data} /> 
) 
} 

同様に（明示のため）：

// ComponentPage.scala.html 
... 
<script> 
    $(() => window.initComponent(@scala.serverVariable.getData(currentUser)) 
</script>