javascript - 将数据从 html 引导到 webpack 捆绑的 javascript

Question

我最近将一个 React 应用程序从全局无处不在的脚本标签每个 js 文件设置转换为捆绑的 webpack 应用程序(太棒了!)。

但是，在最初的应用程序中，我能够在脚本中公开全局初始化函数，然后从我的 Scala Play 后端在生成的 html 服务器中呈现调用。例如

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

然后在后端:

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

现在我的 javascript 已捆绑(并最终缩小/丑化)，我无法让 scala 后端知道要调用的函数的损坏/最终名称。有没有办法告诉 webpack 将某些功能保持全局？是否有更好的模式可用于将服务器端数据引导到 react 组件中？

以下是我考虑过的两种方法:

• 我可以使它成为一个加载/完整样式的组件，其中有一个微调器，然后是一个对服务器的 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>