在我们的库中，如何告诉 webpack 跳过依赖项？

Question

我们有一个传统上仅用于客户端的库。它使用 HTTP 请求（或其他几个依赖库）进行 REST 调用。使用该库时，用户将使用特定的请求提供程序进行初始化，然后就可以了。

我们在示例中使用 webpack 来利用我们的库。

现在扩展它以使用 node-fetch，所以如果有人想从 nodejs 中使用它，它也受支持。

对于使用 webpack 的人来说，webpack 现在正在尝试打包 node-fetch 并且 require 调用在浏览器中失败。我们可以通过设置外部

来解决这个问题

"externals" : {
    "node-fetch": "{}"
}

有没有办法定义我们的库，以便如果消费者使用 webpack target: web，它会跳过节点获取的要求检查？同样，如果消费者使用 webpack target: nodejs - 它需要包含 node-fetch 组件。

Answer 1

感谢您报告此事。因此，根据 This commit and conversation linked to it，自动模块解析字段（也称为 webpack 解析器实例的 described-resolve）会根据您的目标而变化。

默认情况下，当您的 webpack 构建中的目标是 node 时，package.json 字段中的分辨率将默认为 main 字段，否则，browser 字段优先于默认。

Answer 2

已接受的答案和评论中提供的链接显示了如何执行此操作，因此对这些链接 +1，但只是直接在此处显示它

Is there a way to define our library so that if the consumer is using webpack target: web, it'd skip the require check for node-fetch

是。在图书馆的 package.json 中，添加一个 browser 字段，其中

"browser": {
  "node-fetch": false
}

这向 webpack 和其他打包器提供了一个提示，即 node-fetch 模块应该被忽略——即当目标是 web 时，甚至不要尝试将它包含在打包中。当目标为node时，将被包含。

请注意，以上内容依赖于使用 node-fetch 的客户端包 never 中的代码。从这个意义上说，它可以被认为是不安全的，因为没有编译时保证，如果发生这种情况，它只会出错并可能使您的客户端崩溃。如果您绝对确定它永远不能在客户端使用，但是，是完成此操作的最简单方法。

为了更安全 - 即如果您希望客户端代码仅在您尝试使用 node-fetch 时发出警告 - 您还可以选择为客户端包可以包含的模块提供垫片，例如，如果它被使用，只需在 shim 实现中记录警告。您以相同的方式执行此操作，只需提供指向 shim 模块的路径而不是 false

"browser": {
  "node-fetch": "./shims/node-fetch.js"
}

In our library, how to tell webpack to skip dependencies?