从 Webpack 包中排除模块

Question

我开发了一个可在浏览器和 Node.js 中运行的库。在 Node.js 中执行时，该库依赖于浏览器中不需要的模块。我的库的代码只是执行一个简单的特征检测测试，如果需要，额外的模块用 require 导入。一切正常。

当有人在依赖Webpack的项目中使用我的库时，问题就出现了。在这种情况下，在编译期间，Webpack 始终会捆绑该模块，即使对于不需要该模块的面向浏览器的项目也是如此。

作为库开发人员，我有什么方法可以防止 Webpack 在浏览器中运行捆绑模块时捆绑模块？

我唯一能想到的就是分发我的库的两个版本，我真的很想避免。

Answer 1

我想出了自己的解决方案。这有点 hackish 但它解决了问题，而不必要求我的用户自定义他们的 Webpack 配置。

这个想法只是为了隐藏来自 Webpack 的导入。在 CommonJS 版本中，这是我正在使用的：

if (isNode) {
  let mod;
  eval('mod = require("some_module")');
}

在ESM版本中（在package.json文件中设置"type": "module"时使用），我使用的是：

if (isNode) {
  let mod = await Object.getPrototypeOf(async function() {}).constructor(`
    mod = await import("some_module");
    return mod.default;
  `)();
}

当 Webpack 编译代码时，它会忽略导入，因为它们隐藏在字符串中。因此，当浏览器中的代码运行时，我们简单地忽略该代码块，而当它在 Node.js 中为运行时，将动态执行导入。

从 Webpack 包中排除模块

Excluding module from Webpack bundle

webpack

bundling-and-minification