在Electron+React+TypeScript+Webpack环境中使用sqlite3遇问题求助

问题核心原因 #

sqlite3是Node.js原生模块，而Electron的渲染进程（React组件运行的进程）默认禁用了Node.js API，直接在渲染进程中引入sqlite3会触发require is not defined错误——因为渲染进程环境中不存在Node.js的require函数。

方案一：通过IPC通信在主进程处理数据库操作（推荐，安全合规） #

这是Electron官方推荐的方式，将数据库操作放在主进程中，渲染进程通过IPC（进程间通信）与主进程交互。

1. 主进程中配置sqlite3与IPC监听
   修改主进程文件（比如main.ts）：

   import { app, BrowserWindow, ipcMain } from 'electron';
   import sqlite3 from 'sqlite3';
   import path from 'path';
   
   // 初始化数据库（存在用户数据目录，避免权限问题）
   const dbPath = path.join(app.getPath('userData'), 'database.db');
   const db = new sqlite3.Database(dbPath);
   
   // 监听渲染进程的数据库查询请求
   ipcMain.handle('get-database-tables', async () => {
     return new Promise((resolve, reject) => {
       db.all("select name from sqlite_master where type='table'", (err, tables) => {
         if (err) reject(err);
         resolve(tables);
       });
     });
   });
   
   // ... 其他主进程代码（创建窗口等）
   

2. 渲染进程中通过IPC调用主进程的数据库方法
   修改App.tsx，通过ipcRenderer发送请求：

   import { useState, useEffect } from 'react';
   import './App.css';
   import { ipcRenderer } from 'electron';
   
   const App = () => {
     const [count, setCount] = useState(0);
     const [tables, setTables] = useState<any[]>([]);
   
     useEffect(() => {
       // 向主进程请求数据库表数据
       ipcRenderer.invoke('get-database-tables')
         .then(data => setTables(data))
         .catch(err => console.error(err));
     }, []);
   
     return (
       <div className="container">
         <h1>{count}</h1>
         <button onClick={() => setCount((count) => count + 1)}>Count</button>
         {tables.length > 0 && (
           <div>
             <h2>数据库表：</h2>
             <ul>
               {tables.map((table, idx) => (
                 <li key={idx}>{table.name}</li>
               ))}
             </ul>
           </div>
         )}
       </div>
     );
   };
   
   export default App;
   

3. 调整Webpack配置
   确保渲染进程的Webpack配置中，将Electron相关模块设为外部依赖：

   // webpack.config.ts（渲染进程配置）
   export default {
     // ... 其他原有配置
     externals: {
       'electron': 'electron',
       'sqlite3': 'commonjs sqlite3' // 主进程处理sqlite3，渲染进程无需打包
     },
     target: 'electron-renderer' // 指定为Electron渲染进程环境
   };
   

方案二：开启渲染进程的Node集成（仅开发测试用，不推荐生产环境） #

如果只是开发阶段快速验证功能，可以临时开启渲染进程的Node.js API支持，但这会带来安全风险，禁止在生产环境使用：

1. 修改主进程窗口配置
   在创建BrowserWindow时添加nodeIntegration: true和contextIsolation: false：

   // main.ts中创建窗口的代码
   const createWindow = () => {
     const mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         preload: path.join(__dirname, 'preload.js'),
         nodeIntegration: true, // 开启Node集成
         contextIsolation: false // 关闭上下文隔离
       }
     });
     // ... 窗口加载逻辑
   };
   

2. 保留原有Webpack配置
   维持你之前设置的externals配置即可：

   externalsType: 'commonjs',
   externals: { 'sqlite3':'sqlite3' },
   

额外注意事项 #

• 安装sqlite3后必须针对Electron环境重建模块，避免适配问题：

  npm install sqlite3
  npx electron-rebuild
  

  使用yarn的话执行：

  yarn add sqlite3
  yarn run electron-rebuild
  

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