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能够使用此配置“公开”jquery：

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

同样有一种方法可以“暴露”app定义的反应组件吗？感谢。

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输出中的方法/组件？

1 个答案: