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

Question

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

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

  externals: {
    overwolf : 'overwolf'
  }

然后像这样导入

import overwolf from 'overwolf'

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

但是对于webpack开发服务器以及我的测试，我希望能够从标准的浏览器中运行它们，而外部浏览器将不可用。 我不太确定如何进行这项工作，因为开发服务器将始终抱怨导入，而到目前为止，我进行有条件导入的尝试均未奏效。

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

我的尝试是这样的

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

一种可能的解决方案是继续使用定义为external的overwolf （ 在此处了解更多信息 ），并对其他浏览器使用overwolf ：

在您的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的示例：

if (!window.overwolf) {
    window.overwolf = {
        foo() {
            console.info('overwolf now has foo function!');
        }
    };
}

希望这可以帮助！

还要检查此webpack-demo项目。 我认为这会帮助您进行一些配置。

Answer 2

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

除了导入外部，它也可以工作：

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

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