Electron前端如何调用主进程封装的Sqlite数据库能力

• Svelte前端代码运行在Chromium渲染进程沙箱内，默认无完整Node.js访问权限，且sqlite3是C++编写的原生Node模块，根本无法在Chromium的V8环境中运行，此前尝试在组件内直接require数据库模块失败是Electron安全模型的硬约束导致的，不是代码逻辑错误。
• 需要搭建跨进程数据转发通道的判断是正确的，但不需要额外启动独立HTTP服务，直接使用Electron内置的IPC机制搭配预加载脚本桥接，即可实现完整的数据库操作链路，流程远比想象的简洁。

整个实现完全保留已编写完成的DbManager类的所有逻辑，不需要重构原有数据库代码，只需要补三层桥接逻辑即可。

1. 主进程入口配置（原有index.js修改） #

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
// 引入已编写完成的DbManager类，不需要做任何修改
const DbManager = require('./db/manager')

// 全局保存数据库单例，避免重复打开连接
let dbInstance = null

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 指定预加载脚本路径
      preload: path.join(__dirname, 'preload.js'),
      // 保持Electron默认安全配置，禁止为了省事改这两个值
      contextIsolation: true,
      nodeIntegration: false
    }
  })
  // 加载Svelte构建后的页面文件
  mainWindow.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  // 应用启动时完成数据库初始化，和原有逻辑完全一致
  dbInstance = new DbManager()
  dbInstance.open('local.db')

  // 注册IPC处理方法，和preload里的通道名一一对应
  ipcMain.handle('db:execute', async (e, sql, params = []) => {
    return await dbInstance.run(sql, params)
  })

  ipcMain.handle('db:queryOne', async (e, sql, params = []) => {
    return await dbInstance.get(sql, params)
  })

  ipcMain.handle('db:queryAll', async (e, sql, params = []) => {
    return await dbInstance.all(sql, params)
  })

  createWindow()
})

// 应用关闭时释放数据库连接，和原有逻辑一致
app.on('window-all-closed', () => {
  if (dbInstance) dbInstance.close()
  if (process.platform !== 'darwin') app.quit()
})

2. 预加载桥接脚本（新增preload.js） #

这个脚本是连接主进程和渲染进程的唯一安全通道，只需要把允许前端调用的数据库方法暴露出去，不需要暴露任何其他能力：

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('localDB', {
  execute: (sql, params) => ipcRenderer.invoke('db:execute', sql, params),
  queryOne: (sql, params) => ipcRenderer.invoke('db:queryOne', sql, params),
  queryAll: (sql, params) => ipcRenderer.invoke('db:queryAll', sql, params)
})

3. Svelte组件侧调用 #

不需要在组件里import任何Electron相关模块，直接调用preload挂在全局window上的方法即可，所有调用天生支持Promise异步返回，和普通前端接口调用体验完全一致：

<script>
  import { onMount } from 'svelte'
  let articleList = []
  let loadErr = null

  onMount(async () => {
    try {
      // 调用全局暴露的数据库方法，拿到查询结果
      articleList = await window.localDB.queryAll('SELECT id, title FROM article LIMIT 20')
    } catch (err) {
      loadErr = err.message
    }
  })
</script>

{#if loadErr}
  <p>数据加载失败：{loadErr}</p>
{/if}

<div class="article-list">
  {#each articleList as item}
    <div class="article-item">{item.id} - {item.title}</div>
  {/each}
</div>

• 不要为了图省事修改nodeIntegration: true、contextIsolation: false这类安全配置，一旦渲染进程出现XSS漏洞，攻击者可以直接读取本地所有文件，风险极高。
• 不要在preload脚本里直接引入sqlite3模块，preload运行在隔离的上下文中，加载原生模块会直接报错，所有数据库操作必须在主进程完成。
• 不要用传统的ipcMain.on/ipcRenderer.send单向通信做返回值传递，需要手动维护回调ID的逻辑非常繁琐，用ipcMain.handle + ipcRenderer.invoke的组合天然支持Promise返回，不需要额外写同步逻辑。
• 确保DbManager类里的数据库操作方法已经包装成Promise，不然在主进程的handler里await的时候拿不到执行结果。

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