Question

我正在开发一个针对Overwolf的应用http://developers.overwolf.com/documentation/sdk/overwolf/

此平台的应用程序是在Overwolf浏览器中执行的html / js应用程序。浏览器通过全局变量overwolf公开Overwolf API，例如，对API的调用如下所示：

overwolf.windows.getCurrentWindow(function callback(res) {
    var id = res.window.id;
    overwolf.windows.close(id, function callback() {
        logger.warning("Closing App!");
    });
});

（请注意，未导入任何脚本，浏览器会公开API）我目前正在尝试将我的普通JS应用程序迁移到React，并且面临着API暴露方式的一些问题。因为我没有导入任何类型的脚本，所以React不知道该全局变量，并且无法编译错误：

Line 6: 'overwolf' is not defined no-undef

我试图像这样解决这个问题：

const overwolf = typeof overwolf === 'undefined' ? null : overwolf;

在这种情况下，总会将overolf覆盖为null。如果我这样尝试

const overwolfGlobal = typeof overwolf === 'undefined' ? null : overwolf;

react反应器会再次抱怨typeof overwolf。

所以我的一般性问题是：如何处理运行时提供的全局变量，因此React（和Webpack）

不知道

Answer 1

您需要在webpack配置对象上提供externals配置选项。以下告诉 Webpack overwolf库应该可用作全局变量：

externals: {
  overwolf: {
    root: 'overwolf'
  }
}

详细了解Webpack externals：

阻止捆绑某些import ed包，而是在运行时检索这些外部依赖项。

使用React中的全局变量，这些变量在运行时提供，因此在构建时未知

1 个答案: