极简Angular-WebTorrent配置无法运行的原因排查

我尝试在Angular项目中集成WebTorrent，配置看似简单直接，但运行后出现错误。

我的配置代码如下：

import WebTorrent from 'webtorrent';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `bla`,
})
export class App {
  client = new WebTorrent();
}

运行后出现以下错误截图：

错误日志：

WebTorrent: uTP not supported ReferenceError: process is not defined
    at node_modules/node-gyp-build/node-gyp-build.js (webtorrent.js?v=82fe16e7:930:16)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/node-gyp-build/index.js (webtorrent.js?v=82fe16e7:1121:24)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/utp-native/lib/binding.js (webtorrent.js?v=82fe16e7:1130:22)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/utp-native/index.js (webtorrent.js?v=82fe16e7:5932:19)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at webtorrent.js?v=82fe16e7:6226:16
    at (stackblitzstartersbvjzbh-ox4a--4200--7dbe22a9.local-credentialless.webcontainer.io/disabled):node_modules/webtorrent/lib/utp.cjs (https://stackblitzstartersbvjzbh-ox4a--4200--7dbe22a9.local-credentialless.webcontainer.io/@fs/home/projects/stackblitz-starters-bvjzbh/.angular/cache/17.3.3/vite/deps/webtorrent.js?v=82fe16e7:6231:7)
(anonymous) @ webtorrent.js?v=82fe16e7:6228
(disabled):node_modules/webtorrent/lib/utp.cjs @ webtorrent.js?v=82fe16e7:6231
__require2 @ chunk-NMEUP6WG.js?v=82fe16e7:50
(anonymous) @ webtorrent.js?v=82fe16e7:13396
webtorrent.js?v=82fe16e7:6494 Uncaught ReferenceError: global is not defined
    at node_modules/randombytes/browser.js (webtorrent.js?v=82fe16e7:6494:19)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/k-bucket/index.js (webtorrent.js?v=82fe16e7:6527:24)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at webtorrent.js?v=82fe16e7:13650:31

问题原因 #

1. Node.js全局变量缺失：浏览器环境中不存在Node.js的process和global全局变量，但WebTorrent依赖的部分模块（如utp-native、randombytes）在加载时会尝试访问这些变量，直接触发报错。
2. uTP模块不兼容浏览器：utp-native是针对Node.js环境开发的模块，浏览器无法直接支持。WebTorrent本应自动切换到浏览器兼容的传输实现，但因环境变量缺失，触发了加载失败的报错。

解决方案 #

1. 配置Vite补充缺失的全局变量 #

Angular 16及以上版本使用Vite作为构建工具，在项目根目录的vite.config.ts中添加如下配置，为浏览器环境模拟Node.js全局变量：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/builders/dev-server/vite';

export default defineConfig({
  plugins: [angular()],
  define: {
    'process.env': {},
    global: 'window'
  }
});

2. 验证WebTorrent的浏览器兼容模式 #

配置完成后，WebTorrent会自动启用浏览器兼容的传输层（如WebRTC、HTTP），跳过不支持的uTP模块，此时即可正常初始化WebTorrent客户端。

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