如何从 HTML 脚本访问 Webpack 包中的函数答案

【问题标题】：How to access a function in a Webpack bundle from a HTML script如何从 HTML 脚本访问 Webpack 包中的函数
【发布时间】：2017-05-08 23:59:21
【问题描述】：

问题是我想在我的页面上设置一个超时功能。我在页面中有一个 silverlight 应用程序和一个新的 react 应用程序。这 2 个“应用程序”需要有一个公共计时器变量，如果时间超过 10 分钟，我可以在 React 中读取并显示 <Div>。

SilverLight 应用可以在每次点击时调用一个 JS 函数。这可行，但我无法在 webpack 捆绑文件中调用函数？？是不是无法从 html 端的<script> 中的 js 函数中访问函数？？

我是否必须将 Silverlight 点击时间发送到服务器，然后每隔 1 分钟左右从 React 进行一次 ajax 调用以查看 Silverlight 是否已激活？（听起来不是一个好方法）希望你能指出我正确的方向或向我展示一个为我解决这个问题的好方法:) 并记住我是新来的反应和 webpack 所以我不能使用正确的谷歌词自己找到解决方案.

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

这是一个很常见的问题。有不同的方法可以做到这一点。

方法一

如果你想在它之外使用多个这样的函数，那么你必须使用导出函数：

module.exports = {
      yourfunctionName
}

然后你必须配置你的 webpack 把它当作一个库。大多数图书馆都是这样做的。现在访问捆绑文件之外的功能。只需使用您的库名称（在 webpack 中配置）例如，假设我的库名称是 myLibrary，那么代码将是：

myLibrary.yourFunctionName

方法二

如果您不需要导出许多函数，或者您正在寻找一个快速简单的答案，那么您可以将您的函数添加到窗口对象，这样它就可以在任何地方使用。

在您的主文件中（将被捆绑）filename.bundle.js

window.functionName = yourFunction;

无论您想在捆绑之外访问该功能的任何地方

window.functionName();

不建议将函数放在 window 对象中，但如果您正在寻找快速简便的修复方法，那么方法 2 对您有好处。

【讨论】：

很好的答案，但如果您能解释如何“配置您的 webpack 以将其视为库”，那就太好了。

【解决方案2】：

确实，这是一个有点棘手的问题，因为 Webpack 包通常是自包含的，并且不可能在编译绑定到的 Webpack 运行时之外加载模块并访问它们的导出。这是一些背景知识。

您正在寻找的是expose-loader。它将允许您将模块的导出暴露给全局范围。

// Exposes the exports for file.js to the global context
// on property "libraryName".
//
// In web browsers, window.libraryName is then available.
require('expose-loader?libraryName!./file.js');

【讨论】：