Vite中如何使用eventemitter3？出现require未定义报错如何解决

报错原因 #

Vite 基于原生 ES Module 构建，浏览器环境本身不支持 CommonJS 规范的require语法；CRA 内置的 Webpack 会自动完成 CommonJS 到浏览器可运行代码的转译，因此迁到 Vite 后直接写require会抛出Uncaught ReferenceError: require is not defined错误。

可行解决方法 #

按推荐优先级排序：

• 优先改用 ES Module 标准导入语法
  这是性能最好、最符合Vite设计规范的方案，直接替换原有require写法即可：

  // 替换前：const EventEmitter = require('eventemitter3')
  import EventEmitter from 'eventemitter3'
  
  // 后续实例化、调用API的方式和之前完全一致
  const emitter = new EventEmitter()
  

  eventemitter3 本身自带ESM入口和TS类型定义，无需额外安装依赖或做类型声明。
• 项目存在大量CommonJS老代码不想逐行修改时，用CJS转译插件自动处理
  安装开发依赖：

  npm i @originjs/vite-plugin-commonjs -D
  

  在vite.config.js中加入插件配置即可自动处理所有CommonJS格式的导入：

  import { defineConfig } from 'vite'
  import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
  
  export default defineConfig({
    plugins: [viteCommonjs()]
  })
  

• 个别场景必须保留require写法时，用createRequire兼容
  仅建议在非浏览器端逻辑（如SSR、构建脚本）中使用该方案：

  import { createRequire } from 'module'
  const require = createRequire(import.meta.url)
  const EventEmitter = require('eventemitter3')
  

注意事项 #

不要手动在浏览器环境polyfill全局require方法，会徒增包体积，还可能和Vite的预构建逻辑冲突，抵消迁移Vite获得的构建速度优势。

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