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

Posted 2023-02-22

【中文标题】将数据从 html 引导到 webpack 捆绑的 javascript

【英文标题】：Bootstrapping data into webpack bundled javascript from html

【发布时间】：2018-05-03 21:25:07

【问题描述】：

我最近将 React 应用程序从 globals-everywhere script-tag-per-js-file 设置转换为捆绑的 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 将某些功能保持在全局范围内？是否有更好的模式可用于将服务器端数据引导到反应组件中？

这是我考虑过的两种方法：

我可以使它成为一个加载/完整样式组件，其中有一个微调器，然后是一个对服务器的 ajax 调用以获取正确的数据，但由于我在渲染时已经有可用的数据，我宁愿不承担从客户端到服务器的额外往返。 我可以将数据包含在带有数据属性的标签中，并在DocumentReady 上获取它，但是序列化/反序列化对复杂对象有限制，这感觉很hacky。

【参考方案1】：

只需将函数附加到window 对象。这将防止名称修改。

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

类似（为了明确起见）：

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