如何在 webpack 捆绑输出中调用方法/组件？答案

【问题标题】：how to call methods/components in webpack bundle output?如何在 webpack 捆绑输出中调用方法/组件？
【发布时间】：2016-06-05 09:32:07
【问题描述】：

正在寻找一种方法来做跟随，有可能吗？

// 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?$' }

同样有没有办法“公开”应用程序定义的反应组件？谢谢。

【问题讨论】：

你的用例到底是什么？
例如使用基于服务器运行时数据的道具渲染“Main”（无需进行额外的 ajax 调用）。

标签： reactjs webpack react-jsx

【解决方案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>

【讨论】：

感谢您的回答。与您的建议类似，我最终在 html 模板中使用了以避免使用“window”。不管怎样，如果 webpack 以后能支持导出 App 定义的 react 组件的用例就好了。
不客气。但对我来说，从 webpack 导出是没有意义的。 webpack 的全部意义在于将所有 js 文件捆绑到一个（多个）包中，以将所有代码封装在块中。通信只能是一种方式：外部 => webpack 包，而不是 webpack 包 => 外部。
我明白你的意思。但是 webpack 确实允许我们正确地公开 npm 组件。