Electron-Vite项目配置rollup-node-polyfill解决Twilio运行报错求助

问题描述 #

在Electron-vite项目中使用twilio-client时，开发模式（electron-vite dev）添加Node Polyfill插件后可正常运行，但执行electron-vite preview、构建应用或electron-vite dev --watch时，会抛出错误：Uncaught TypeError: Failed to resolve module specifier "events"。尝试配置rollup-plugin-node-polyfills到build.rollupOptions.plugins无效，通过preload脚本暴露Twilio给渲染进程也未解决问题。

解决方案 #

1. 替换为Vite专用的Node Polyfill插件 #

rollup-plugin-node-polyfills无法适配Electron-vite的Vite构建流程，改用vite-plugin-node-polyfills（专为Vite设计的Node模块补全插件）：

安装插件：

npm install vite-plugin-node-polyfills --save-dev

2. 修改electron.vite.config.ts配置 #

在renderer配置中添加插件，并强制预构建twilio-client以确保补全生效：

import { defineConfig } from 'electron-vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  main: {
    // 保持原main配置不变
  },
  preload: {
    // 保持原preload配置不变
  },
  renderer: {
    plugins: [
      nodePolyfills({
        // 指定需要补全的核心模块，至少包含events
        include: ['events'],
        // 启用必要的全局变量补全
        globals: {
          global: true,
          process: true,
          Buffer: true
        }
      })
    ],
    optimizeDeps: {
      // 强制Vite预构建twilio-client，确保补全逻辑提前应用
      include: ['twilio-client']
    }
  }
})

3. 调整渲染进程代码（可选） #

无需通过preload脚本暴露Twilio，直接在渲染进程中导入即可：

import Twilio from 'twilio-client';

const device = new Twilio.Device();
device.setup('你的令牌', { debug: true });
console.log(device);

原理说明 #

• Electron-vite的renderer构建基于Vite，rollup-plugin-node-polyfills作为Rollup原生插件，无法被Vite的构建流水线正确处理；而vite-plugin-node-polyfills会在Vite的依赖预构建和打包阶段自动补全Node.js核心模块。
• 配置optimizeDeps.include强制预构建twilio-client，避免Vite将其视为外部依赖而跳过补全步骤。

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