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

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 不知道该全局变量，因此无法编译并出现错误:

第 6 行:“overwolf”未定义 no-undef


我尝试像这样解决这个问题:

const overwolf = typeof overwolf === '未定义' ? null:overwolf；

在这种情况下，overwolf 将始终被覆盖为 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的信息:

Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.