如何在Snowpack中将node_modules下的wasm文件作为资源加载（适配sql.js）

数据老陈

2026-10-1

Snowpack 中使用 sql.js 的实现方案

方案1：手动拷贝wasm文件（简单快捷，适合小型项目）

安装sql.js依赖：
```
npm install sql.js
```
在项目根目录的public文件夹下新建static子目录，将node_modules/sql.js/dist/sql-wasm.wasm文件拷贝到该static目录中。Snowpack默认会将public目录下的所有资源原样暴露到服务根路径，无需额外配置。

在业务代码中直接初始化sql.js即可：

import initSqlJs from 'sql.js';

// 传入wasm文件的可访问路径
const SQL = await initSqlJs({
  locateFile: () => '/static/sql-wasm.wasm'
});

// 示例：创建空数据库
const db = new SQL.Database();

方案2：自动拷贝wasm文件（适合多人协作/生产项目）

无需手动复制文件，通过Snowpack插件实现构建、开发阶段自动同步wasm文件：

安装文件拷贝插件：
```
npm install -D snowpack-plugin-copy
```

编辑项目根目录下的snowpack.config.js，添加插件配置：

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    [
      "snowpack-plugin-copy",
      {
        patterns: [
          {
            source: "node_modules/sql.js/dist/sql-wasm.wasm",
            destination: "static",
          },
        ],
      },
    ],
  ],
};