与 Rollup 捆绑时忽略或替换依赖项的导入答案

【问题标题】：Ignore or replace dependencies' imports when bundling with Rollup与 Rollup 捆绑时忽略或替换依赖项的导入
【发布时间】：2021-12-24 05:58:48
【问题描述】：

我正在使用 Rollup 捆绑一个 JS 库。这个库依赖于@tensorflow/tfjs-core。

在 tfjs 的代码中，有一个获取 URL 的函数。如果是在浏览器环境中，则使用全局fetch函数；如果不是，它会尝试导入node-fetch。

以下几行中的一些内容：

fetch(path: string, requestInits?: RequestInit): Promise<Response> {
  if (env().global.fetch != null) {
    return env().global.fetch(path, requestInits);
  }

  if (systemFetch == null) {
    systemFetch = require('node-fetch');
  }

  return systemFetch(path, requestInits);
}

我的库是在浏览器中运行的，所以它总是使用全局fetch 函数。但是，Rollup 仍将 node-fetch 的 require 捆绑到我的 lib 资产中。

这应该不是问题，但是一些消费者在使用 webpack 的 React 项目中使用该库时会报告错误：

编译失败。

./node_modules/[我的库]/index.js 找不到模块：'node-fetch'。确保已安装此软件包。

你可以通过运行：npm install node-fetch 来安装这个包。

问题是：有什么方法可以告诉 Rollup 不是没有捆绑包吗？

我想过在生成捆绑包后将require('node-fetch') 替换为undefined，但感觉就像是一个肮脏的黑客。还有其他建议吗？

PS：我相信在消费者项目上将 node-fetch 标记为 external 可以解决此问题，但由于我没有在我的库中使用 node-fetch，因此最好将其从最终输出中删除。

【问题讨论】：

查看该模块的 package.json 是一个很好的起点。它具有"browser" 属性，该属性禁用node-fetch 的安装
你考虑过 Rollup 中的模块别名吗？
你也可以分享你的汇总配置 + package.json 吗？

标签： javascript webpack rollupjs

【解决方案1】：

其他包管理器可以根据环境包含或排除文件，test、development、production等

有很多方法可以实现这一点，甚至可以达到

# Makefile

ENVIRONMENT ?= test

ROLLUP = $(which rollup)

ENVSUBST = $(which envsubst)

rollup.config.js: src/$(ENVIRONMENT)
    ${ENVSUBST} < $@ > $^
    ${ROLLUP} $^ -o $(ENVIRONMENT).js

如果你创建了以你的环境命名的文件，你可以使用

make -e environment=browser

我不希望我的代码能够工作，只是为了表达想法。

【讨论】：

【解决方案2】：

有这个loc 用于从包中排除节点获取。您可以在汇总配置中考虑类似的方法。（我认为）如果您添加它，node-fetch 将/不应该成为您的缩小库的一部分。

【讨论】：