Electron中导入CodeMirror失败：import与require均报错的原因及解决方法

报错原因分析 #

1. Import语句报错原因 #

浏览器环境（包括Electron的渲染进程）原生不支持直接导入裸模块名（比如codemirror），它只能识别以/、./或../开头的相对/绝对路径模块。直接写import ... from "codemirror"时，浏览器无法定位到对应的模块文件路径，因此抛出错误。

2. Require语句报错原因 #

新版本Electron默认在渲染进程中禁用了Node.js API（包括require），这是出于安全考量（默认开启上下文隔离与沙箱模式），导致渲染进程中不存在require这个全局函数，从而触发报错。

可行解决方法 #

方法一：使用打包工具（推荐） #

用Webpack、Vite或Parcel这类工具打包你的Electron前端代码，它们会自动将npm包（如codemirror）解析为浏览器可识别的模块路径，并处理所有依赖的打包工作。

• 大致步骤：
  • 初始化项目的打包配置（比如Vite可通过vite init生成基础配置）
  • 将渲染进程的JS文件设为打包入口
  • 打包完成后，让Electron窗口加载打包后的HTML文件
  • 之后即可正常使用import { EditorView, basicSetup } from "codemirror"导入模块

方法二：开启Electron渲染进程的Node.js集成（仅适合开发测试，不推荐生产环境） #

如果只是临时开发测试，可以修改Electron主进程的窗口配置，开启Node集成并关闭上下文隔离：

// 主进程main.js中的窗口创建代码
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true, // 开启Node.js API集成
    contextIsolation: false, // 关闭上下文隔离
    // 注意：生产环境开启此配置会带来安全风险，谨慎使用
  }
})

配置完成后，渲染进程即可通过require导入codemirror：

const { EditorView, basicSetup } = require("codemirror")

方法三：直接导入ES模块文件（临时测试用） #

找到codemirror安装目录下的ES模块文件（通常在node_modules/codemirror/dist/路径下），使用相对路径导入：

import { EditorView, basicSetup } from "../node_modules/codemirror/dist/index.js"

这种方法无需打包，但路径易出错，依赖管理繁琐，仅适合临时验证功能。

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