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

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

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

  externals: {
    overwolf : 'overwolf'
  }

然后像这样导入

import overwolf from 'overwolf'

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

然而，对于webpack开发服务器，以及我的测试，我希望能够在外部浏览器不可用的标准浏览器中运行它们。我不太确定如何使其工作，因为dev服务器总是会抱怨导入，并且我尝试进行条件导入到目前为止没有成功

我想要实现的是模拟overwolf变量，这样webpack dev server将编译并让我使用模拟版本运行代码

我的尝试是这样的

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

---

一种可能的解决方案是继续使用定义为

外部

（阅读更多）的

overwalf

，并对其他浏览器使用polyfill：

在

index.html

中包含一个

overwolf.js

脚本，该脚本将提供要使用的模拟对象

示例使用

HtmlWebpackPlugin

和

html网页包模板

生成

index.html

，作为构建过程的一部分。在

插件

阵列中包括：

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!');
        }
    };
}

希望这有帮助

---

也检查这个项目。我认为它可以帮助您进行一些配置。

一个可能的解决方案是继续使用定义为

外部

的

overwolf

（阅读更多），并对其他浏览器使用polyfill：

在

index.html

中包含一个

overwolf.js

脚本，该脚本将提供要使用的模拟对象

示例使用

HtmlWebpackPlugin

和

html网页包模板

生成

index.html

，作为构建过程的一部分。在

插件

阵列中包括：

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!');
        }
    };
}

希望这有帮助

---

也检查这个项目。我想它可以帮助您进行一些配置。

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

与导入外部文件不同，这也适用于：

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

---

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

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

与导入外部文件不同，这也适用于：

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

---

在开发环境中，Webpack不会对此抱怨，在生产环境中，require仍然会给我真正的API。

尝试将

import overwolf从'overwolf'

更改为

import*as overwolf from'overwolf'

或尝试

import{overwolf}从'overwolf'

不幸地没有帮助。我认为这是来自“overwolf”的部分，它不喜欢将

import-overwolf从“overwolf”

更改为

import*as-overwolf从“overwolf”

或尝试

import{overwolf}从“overwolf”

不幸地没有帮助。我想这是它不喜欢的“过狼”部分