__non_webpack_require__ 未定义 [英] __non_webpack_require__ is not defined

问题描述

我是 webpack 和 node 的新手，我想知道如何使用

I am new to webpack and node, and I am wondering how to use the

__non_webpack_require__ 

函数.我访问过 webpack 的网站，但仍然感到困惑这个功能是什么以及我如何使用它.您能否简要描述一下此功能的用例，然后介绍如何在节点/React 应用中使用它?

function. I've visited webpack's website but am still confused as to what this function is and how I can use it. Could you provide a short description of a use case for this function and then how to use it in a node / react app?

推荐答案

Webpack 处理您在应用程序中使用的每个模块，从入口点开始，包括您导入的每个模块 (import或 require) 并将其包含在您的包中.__non_webpack_require__ 是一个函数，它将导致一个普通的 require 调用.

Webpack processes every module that you use in your application starting from the entry point(s) and including every module you import (import or require) and includes it in your bundle. The __non_webpack_require__ is a function that will result in a plain require call.

我们以这个入口点为例:

Let's take this entry point as an example:

const processedByWebpack = require("./module");
const notProcessed = __non_webpack_require__("./non-webpack");

console.log(processedByWebpack);
console.log(notProcessed);

在这种情况下，webpack 将捆绑该应用程序并包含您导入的每个模块，在这种情况下只是 ./module.js.所以输出将是:

In this case webpack will bundle that application and include every module you import, which in this case is only the ./module.js. So the output will be:

/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

const processedByWebpack = __webpack_require__(1);
const notProcessed = require("./non-webpack");

console.log(processedByWebpack);
console.log(notProcessed);


/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = "This module is bundled with webpack"


/***/ })
/******/ ]);

./module.js 模块包含在包中，如果存在任何适用的规则，它也会被任何加载器处理.另一方面，./non-webpack.js 不包含在包中，webpack 调用了 require.这意味着 ./non-webpack.js 将在执行时被解析，如果它不可用或包含无效的 JavaScript，它将失败并显示运行时错误.

The ./module.js module was included in the bundle and would also have been processed by any loaders if there were any applicable rules present. On the other hand, the ./non-webpack.js is not included in the bundle and webpack made it a call to require. This means that the ./non-webpack.js will be resolved when it's executed and it will fail with a runtime error if it isn't available or contains invalid JavaScript.

__non_webpack_require__ 是一种解决 webpack 处理所有 require 调用这一事实的方法.因为 webpack 捆绑了所有模块，所以它必须在编译时知道要包含哪些模块.这使得 require 比 Node.js 中的实际限制更多.例如，您不能使用动态 requires，这意味着您不能使用变量作为模块的路径(另请参阅 webpack 动态模块加载器通过 require).例如:

__non_webpack_require__ is a way to work around the fact that webpack processes all require calls. Because webpack bundles up all the modules, it must know which modules to include at compile time. This makes require more restrictive than it actually is in Node.js. For instance, you can't use dynamic requires, that means you can't use a variable as the module's path (see also webpack dynamic module loader by require). For example:

// Path to module as a variable (could be an argument to a function)
const modulePath = "./module";

const processedByWebpack = require(modulePath); // Fails
const notProcessed = __non_webpack_require__(modulePath);

在常规的 require 中，webpack 会失败，因为它不知道要包含哪些模块来覆盖所有可以在运行时引用的模块.在这个例子中，它可能看起来很明显，但它可以使用用户输入来确定要加载的模块.使用 __non_webpack_require__ 它只是创建一个 require 调用，你必须在运行时处理可能的 Module not found 异常.

In the regular require webpack will fail, because it doesn't know which modules to include to cover all the modules that could be referenced at runtime. In this example it might seem obvious, but it could go as far as using user input to determine the module to load. With __non_webpack_require__ it simply creates a require call and you'll have to deal with possible Module not found exceptions at runtime.

可能永远不会.这是这些功能之一，应该被视为最后的手段，您需要避开 webpack 以获得一些动态模块解析.在大多数情况下，还有其他解决方案可以实现相同的目标(例如，通过使用 Externals)，其他一切都是边缘情况.

Probably never. That's one of these functions that should be considered as last resort where you need to sidestep webpack to have some dynamic module resolution. In most situations there are other solutions to achieve the same goal (e.g. deferring imports to runtime by using Externals), everything else is an edge case.

你会注意到 __non_webpack_require__ 被转换成一个 require 调用.这意味着它只能在 Node.js 中工作并且在任何浏览器环境中都失败，除非您定义了一个全局的 require 可能会或可能不会做一些特殊的事情.另一个缺点是它是特定于 webpack 的，当您想使用其他工具(例如用于测试)时，它不起作用，或者您将很难解决它.

You will have noticed that __non_webpack_require__ is transformed into a require call. This means that it only works in Node.js and fails in any browser environment unless you have a global require defined that may or may not do something special. Another downside is that it is webpack specific and when you want to use another tool (for instance for testing), it won't work or you'll have a hard time trying to work around it.

这篇关于__non_webpack_require__ 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！