如何在Gatsby项目中正确配置使用sql.js-httpvfs库并解决报错

1. 修正gatsby-node.js配置 #

你当前的webpack配置直接覆盖了Gatsby默认的入口、输出、开发服务规则，是导致没有生成预期构建产物的核心原因，Gatsby的onCreateWebpackConfig仅用来补充自定义配置，不需要重写默认构建逻辑。

替换你的gatsby-node.js内容为以下代码：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    // 开启WebAssembly支持，sql.js-httpvfs运行必需
    experiments: {
      asyncWebAssembly: true,
    },
    module: {
      rules: [
        // 仅当你的项目使用TypeScript时保留以下规则，否则直接删除
        {
          test: /\.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
        // 处理web worker文件
        {
          test: /\.worker\.js$/,
          use: { loader: "worker-loader" },
        }
      ]
    }
  })
}

安装缺失的依赖：
npm install worker-loader ts-loader --save-dev
如果你的项目不使用TypeScript，可以删除ts-loader的安装和对应的webpack规则

2. 调整静态资源路径 #

Gatsby会将static目录下的所有文件直接复制到构建产物根目录，你需要先完成以下操作：

• 从node_modules/sql.js-httpvfs/dist/目录下复制sqlite.worker.js、sql-wasm.wasm两个文件到项目根目录的static文件夹下
• 将你的myTestDb.sqlite3数据库文件也放到static文件夹下

3. 修正业务代码逻辑 #

createDbWorker和数据库查询方法都是异步操作，你当前的同步调用无法拿到正确返回结果，替换你的index.js代码为以下内容：

import { createDbWorker } from "sql.js-httpvfs";

// 静态资源放在static目录下可直接通过根路径访问
const workerUrl = "/sqlite.worker.js";
const wasmUrl = "/sql-wasm.wasm";

async function load() {
  // 等待worker初始化完成
  const worker = await createDbWorker(
    [
      {
        from: "inline",
        config: {
          serverMode: "full",
          url: "/myTestDb.sqlite3",
          requestChunkSize: 4096,
        },
      },
    ],
    workerUrl,
    wasmUrl
  );
  // 等待查询执行完成
  const result = await worker.db.query(`select * from districts`);
  document.body.textContent = JSON.stringify(result);
}

load();

额外说明 #

• Gatsby默认的构建产物目录是public而非dist，不要手动指定output配置，执行gatsby build后所有产物会生成在public目录下
• 如果你是在React组件内运行这段代码，建议将load函数放在useEffect钩子中调用，避免重复执行

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