忽略 Webpack 中的特定 require()？

Posted 2023-02-24

【中文标题】忽略 Webpack 中的特定 require()？

【英文标题】：Ignoring specific require()s in Webpack?

【发布时间】：2019-03-05 23:49:17

【问题描述】：

我有一个可与 NodeJS 和浏览器互操作的库，并且两者都通过 Webpack 运行以生成最终包。我遇到的问题是 Webpack 会将所有 require() 语句重写为 __webpack_require__() 并尝试捆绑库，这不适用于 fs 和 worker_threads 之类的东西。在给定特定输入字符串的情况下，如何让它忽略某些 require()s 和相关机制（require.resolve()、import 等）？

我读到我可以使用webpack.IgnorePlugin，但我不希望用户必须在他们的构建中为我的库添加特殊规则。我自己也无法让它工作，它仍然重写了require()s。我也读过我可以做到eval('require("fs")') 但这似乎很老套，但如果这真的是最好的方法，我愿意这样做。

例子：

//example.js
if(typeof window !== "undefined") 
    //Browser
    var myWorker = new Worker();

else 
    //NodeJS
    var Worker = require("worker_threads"); //I want Webpack to keep this line as-is
    var myWorker = new Worker();

【问题讨论】：

你能举一个简单的例子来说明你想要什么吗？

@Adam 添加示例

最好的方法似乎是var _require = eval('require');，然后在文件中的任何地方使用它。

抱歉回复晚了。在过去的几天里，我一直在研究这个问题，找不到比你建议的更好的选择。我可能会创建一个你可以专门为此使用的包。

【参考方案1】：

要在与 Webpack 捆绑后在您的代码中保持原样调用 require，只需将 require 替换为 __non_webpack_require__。因此，您的示例将如下所示：

if (typeof window !== "undefined") 
    var myWorker = new Worker();

else 
    var Worker = __non_webpack_require__("worker_threads");
    var myWorker = new Worker();

这是 Webpack 的一个隐藏功能（可能是因为它不经常使用）发现 here 忽略了 require 调用，因此可以在应用程序运行时而不是捆绑时评估它们。

请注意，这不应该用于针对 Web 浏览器的应用程序，因为它会导致使用 resolve，并且 Web 浏览器不知道 resolve 是什么。仅在以 Node 为目标的代码中使用它。

【讨论】：

老兄，天哪，这是文档深处的一个很棒的发现。谢谢！下次我需要一个以确保它有效时，我会接受。