如何在Node.js+SQLite3项目中同时使用document.querySelector与require？

你遇到的两个报错本质是服务端Node.js环境和客户端浏览器环境的API不兼容，代码混淆了两个运行环境的专属能力：

• require语法报错：require是Node.js专属的CommonJS模块化导入语法，浏览器原生不支持，你把包含require('sqlite3')这类服务端依赖引用的代码放到浏览器端运行就会触发该错误
• document未定义：document是浏览器端专属的DOM API，Node.js运行时没有这个全局对象，你把操作DOM的前端代码放到Node服务进程中直接执行就会触发该错误

核心原则是严格分离前后端代码的运行边界，绝对不能跨环境调用专属API：

代码拆分规则 #

• 服务端代码（server.js、handleSQLite.js）：仅运行在Node.js环境，负责对接SQLite3数据库、对外提供HTTP接口，禁止出现任何操作document/window等浏览器API的逻辑
• 前端代码（main.js、index.html）：仅运行在浏览器环境，负责页面渲染、DOM操作、调用后端接口拿数据，禁止出现require('sqlite3')这类服务端依赖的导入逻辑

具体落地步骤 #

1. 调整handleSQLite.js：仅保留数据库连接、增删改查的相关方法，导出给server.js调用，删除所有和前端DOM交互的逻辑
2. 调整server.js：用Express/Koa这类Node服务框架暴露HTTP接口，比如写GET /api/getData接口，接口内部调用handleSQLite.js的方法查询数据库，将查询结果以JSON格式返回给前端，不要引用任何前端代码文件
3. 调整前端代码：index.html中引入main.js的script标签添加type="module"属性，main.js中需要获取数据库数据时，用fetch调用后端暴露的HTTP接口，拿到返回的JSON数据后再操作document渲染到页面上
4. 如果你用了Vite/Webpack这类打包工具，打包前端代码时要排除sqlite3这类Node原生依赖，不要把服务端依赖打进前端资源包

如果不想手动搭建前后端分离的基础项目，可以选择这些成熟方案降低开发成本：

• 轻量服务端框架：优先选Express，生态完善，对接sqlite3库的示例非常多，也可以选择更轻量化的Koa
• 全栈框架：如果希望前后端代码放在同一个项目、无需手动处理跨域，可以用Next.js这类全栈框架，服务端逻辑写在API路由中，前端逻辑写在页面组件内，框架自动隔离前后端运行环境
• 纯前端离线方案：如果你的应用不需要后端服务，就是纯前端离线使用，可以把SQLite3替换为浏览器原生支持的IndexedDB，或者用封装更友好的localForage库，无需后端服务就能实现本地数据持久化

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