如何在 webpack bundle 输出中调用 methods/components？

Question

正在寻找一种方法进行跟踪，是否可行？

// main.jsx
export default class Main extends React.Component {}

// include webpack bundle output and call it from html template
<div>
<script src="/webpack/app-bundle.js"></script>
<script>Main() /** call method in bundle **/ </script>
</div>

例如，webpack 能够 "expose" jquery 使用此配置：

{ test: require.resolve('jquery'), loader: 'expose?$' }

同样有没有办法"expose"应用程序定义反应组件？谢谢

Answer 1

您应该换个角度考虑，即：在您的主文件与您的包之间进行通信。为此，您可以将一些数据附加到 window 对象，这将定义您可以在包中访问的全局可用变量。

例如：

// main.jsx
export default class Main extends React.Component { render() => <div>{this.props.foo}</div> }

ReactDOM.render(<Main foo={window.MYAPP.foo}/>, document.getElementById('app'))

// include webpack bundle output and call it from html template
<div id="app></div>
<script>window.MYAPP.foo = 'bar'</script>
<script src="/webpack/app-bundle.js"></script>
</div>

如何在 webpack bundle 输出中调用 methods/components？

how to call methods/components in webpack bundle output?

reactjs

webpack

react-jsx