使用Rollup打包时如何忽略依赖中的node-fetch引入

你可以通过Rollup官方生态的配置实现需求，不需要手动修改产物，以下是3种常用的可靠方案：

方案1：使用@rollup/plugin-replace直接替换无效引入 #

这是最适配你场景的方案，构建阶段直接替换node-fetch的引入语句，从根源上消除webpack的依赖检测：

1. 先安装官方替换插件：
   npm install @rollup/plugin-replace -D
2. 修改rollup.config.js的插件配置：

import replace from '@rollup/plugin-replace';

export default {
  // 其余原有配置保持不变
  plugins: [
    replace({
      // 直接将require('node-fetch')替换为undefined
      "require('node-fetch')": 'undefined',
      preventAssignment: true
    }),
    // 其余插件放在replace之后执行
  ]
}

替换后代码里的systemFetch = require('node-fetch')会变为systemFetch = undefined，由于你的库仅在浏览器环境运行，永远走全局fetch的分支，这部分逻辑不会执行，完全不影响功能，同时webpack不会再检测到node-fetch的依赖引入。

方案2：开启@rollup/plugin-node-resolve的浏览器模式 #

如果你使用@rollup/plugin-node-resolve处理第三方依赖，开启browser选项会自动优先加载依赖的浏览器适配版本，tfjs-core本身已经配置了浏览器端入口，可以直接跳过node环境专属的node-fetch逻辑：

import resolve from '@rollup/plugin-node-resolve';

export default {
  plugins: [
    resolve({
      browser: true,
      // 其余resolve原有配置
    })
  ]
}

方案3：将node-fetch标记为外部依赖 #

如果你输出的是ES模块/CommonJS格式，直接把node-fetch加入external列表，Rollup就不会打包该依赖的代码，配合output配置彻底消除依赖声明：

export default {
  external: ['node-fetch'],
  output: {
    // 其余output原有配置
    // 如果你输出UMD格式，增加全局映射
    globals: {
      'node-fetch': 'undefined'
    }
  }
}

内容的提问来源于stack exchange，提问作者appa yip yip