使用 Webpack 和 React 在开发环境中模拟外部导入 [英] Mocking external imports in development environment using Webpack and React

问题描述

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

In my React Application I am using an API which is provided at runtime as a global variable by the Browser in which the application runs.

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

To make the Webpack compilation process work I have added this into the webpack config:

  externals: {
    overwolf : 'overwolf'
  }

然后像这样导入

import overwolf from 'overwolf'

当我构建我的生产应用程序并在浏览器中运行它时，这工作正常.

This works fine when I built my production application and run it inside the Browser.

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

However for the webpack development server, as well as my tests I want to be able to run them from a standard browser where the external will not be available. I am not quite sure how to make this work as the dev server will always complain about the import and my attempts to make conditional imports did not work out so far.

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

What I would like to achieve is to mock the overwolf variable, so that webpack dev server will compile and let me run my code with the mocked version.

我的尝试是这样的

import overwolf from 'overwolf'

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

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

Which results in the following error on the webpack development server

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

推荐答案

一种可能的解决方案是继续使用定义为 external 的 overwolf(阅读更多 此处)，并为其他浏览器使用 polyfill:

One possible solution is to keep using the overwolf defined as an external (read more here), and use a polyfill for other browsers:

在您的 index.html 中包含一个 overwolf.js 脚本，它将提供要使用的模拟对象.

In your index.html include an overwolf.js script which will provide the mock object to use.

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

Example using HtmlWebpackPlugin and html-webpack-template to generate the index.html as part of the build process. Include in your plugins array:

new HtmlWebpackPlugin({
    template: './node_modules/html-webpack-template/index.ejs',
    inject: false,
    scripts: ['/overwolf.js']
})

这是之前包含的 overwolf.js 的示例:

And this is an example for the included overwolf.js previously:

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

希望这会有所帮助！

另请检查这个 webpack-demo 项目.我认为它会帮助您进行一些配置.

Check also this webpack-demo project. I think it would help you with some configurations.

这篇关于使用 Webpack 和 React 在开发环境中模拟外部导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！