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

Question

在我的 React 应用程序中，我使用一个 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

一种可能的解决方案是继续使用定义为外部的overwolf(了解更多here)，并为其他浏览器使用polyfill:

在您的 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项目。我认为它会对您进行一些配置有所帮助。