2

我们有一个传统上只是客户端的库。它使用 HTTP 请求(或其他几个依赖库)进行 REST 调用。使用该库时,用户将使用特定的请求提供者进行初始化,然后离开。

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

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

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

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

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

有问题的项目是https://github.com/OfficeDev/PnP-JS-Core

4

2 回答 2

2

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

默认情况下,当 targetnode在你的 webpack 构建中时,package.json 字段中的解析将默认为mainelsebrowser字段,默认情况下字段优先。

更多参考https://github.com/webpack/webpack/issues/151

于 2016-08-12T04:26:18.257 回答
1

接受的答案和评论中提供的链接显示了如何做到这一点,所以+1,但只是在这里直接浮出水面

有没有办法定义我们的库,以便如果消费者使用 webpack 目标:web,它会跳过对 node-fetch 的要求检查

的。在库中package.json,添加一个browser包含以下内容的字段

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

node-fetch当目标是web. 当目标是node时,它将被包括在内。


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

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

"browser": {
  "node-fetch": "./shims/node-fetch.js"
}
于 2019-03-24T09:18:44.393 回答