无法在浏览器环境导入better-sqlite3模块的问题求助

问题本质 #

better-sqlite3是仅适用于Node.js环境的数据库模块，它依赖Node.js的文件系统、原生扩展等底层API，浏览器完全没有这些运行环境支持。你用npm run能正常运行是因为执行环境是Node.js，但直接在浏览器里加载模块时，不仅浏览器不识别better-sqlite3这种裸模块标识符，就算能识别，这个模块本身也跑不起来。

解决方案 #

方案1：改用前后端分离架构（推荐）

把数据库操作逻辑放在Node.js后端服务中，前端通过接口调用的方式操作数据库，这是Web项目的标准架构：

• 后端示例（用Express框架）：

  // server.js
  import express from 'express';
  import Database from 'better-sqlite3';
  const app = express();
  const db = new Database('./mydb.db');
  
  // 示例：获取数据接口
  app.get('/api/get-users', (req, res) => {
    const users = db.prepare('SELECT * FROM users').all();
    res.json(users);
  });
  
  app.listen(3000, () => console.log('后端服务运行在3000端口'));
  

• 前端示例：

  // frontend.js
  async function loadUsers() {
    const response = await fetch('http://localhost:3000/api/get-users');
    const users = await response.json();
    console.log(users);
  }
  loadUsers();
  

方案2：改用浏览器兼容的SQLite库（仅限前端本地操作场景）

如果确实需要在浏览器里直接操作SQLite，放弃better-sqlite3，改用纯JS实现的浏览器兼容库，比如sql.js：

• 先安装依赖：npm install sql.js
• 前端代码示例：

  import initSqlJs from 'sql.js';
  // 加载对应的wasm文件（不同打包工具写法可能有差异）
  import sqlWasm from 'sql.js/dist/sql-wasm.wasm?url';
  
  async function initLocalDB() {
    const SQL = await initSqlJs({ locateFile: () => sqlWasm });
    const db = new SQL.Database();
    
    // 创建表并插入数据
    db.run('CREATE TABLE users (id INT, name TEXT)');
    db.run('INSERT INTO users VALUES (?, ?)', [1, '张三']);
    
    // 查询数据
    const result = db.exec('SELECT * FROM users');
    console.log(result);
  }
  initLocalDB();
  

补充说明 #

浏览器的ES模块系统要求导入路径必须是相对路径（.//../）、绝对路径或完整URL，不支持better-sqlite3这种裸模块名——这是Node.js独有的模块解析逻辑，浏览器没有实现。而且就算解决了路径问题，better-sqlite3依赖的Node.js原生API在浏览器里也不存在，根本无法运行。

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