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

Question

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

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

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

Answer 1

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

方法一

如果您想在其外部使用多个此类函数，则必须使用以下方法导出该函数：

module.exports = {
      yourfunctionName
}

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

myLibrary.yourFunctionName

方法二

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

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

window.functionName = yourFunction;

以及您想在 bundle 之外访问该功能的任何地方

window.functionName();

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

Answer 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');