Question

在我的React应用程序中，我正在使用一个API，该API在运行时作为全局变量提供，运行应用程序的浏览器。

为了使Webpack编译过程正常工作，我已将其添加到webpack配置中：

  externals: {
    overwolf : 'overwolf'
  }

然后像这样导入

import overwolf from 'overwolf'

当我构建我的生产应用程序并在浏览器中运行它时，这很好。

然而，对于webpack开发服务器，以及我的测试，我希望能够从外部无法使用的标准浏览器运行它们。我不太清楚如何使这项工作，因为开发服务器将始终抱怨导入，我到目前为止尝试进行条件导入并没有成功。

我想要实现的是模拟overwolf变量，以便webpack dev服务器将编译并让我使用模拟版本运行我的代码。

我的尝试就像这样

import overwolf from 'overwolf'

export function overwolfWrapper() {
    if(process.env.NODE_ENV !== 'production') {
        return false;
    }
    else {
        return overwolf;
    }
}

导致webpack开发服务器出现以下错误

ReferenceError: overwolf is not defined
overwolf
C:/Users/jakob/Documents/private/projects/koreanbuilds-overwolf2/external "overwolf":1

Answer 1

一种可能的解决方案是继续使用定义为overwolf的{{1}}（阅读更多here），并将polyfill用于其他浏览器：

在external中包含一个index.html脚本，该脚本将提供要使用的模拟对象。

使用overwolf.js和HtmlWebpackPlugin生成html-webpack-template作为构建过程的一部分的示例。包含在index.html数组中：

plugins

这是之前包含的new HtmlWebpackPlugin({ template: './node_modules/html-webpack-template/index.ejs', inject: false, scripts: ['/overwolf.js'] })的示例：

overwolf.js

希望这有帮助！

同时检查此webpack-demo项目。我认为它可以帮助你进行一些配置。

Answer 2

我自己也找到了一个相当简单的解决方案。

而不是导入外部，这也有效：

const overwolf = process.env.NODE_ENV === 'production' ? require('overwolf') : new MockedOverwolf();

Webpack不会在开发环境中抱怨这一点，并且在生产中需要仍然会给我真正的API。

使用Webpack和React在开发环境中模拟外部导入

2 个答案: