如何在不使用打包工具的情况下使用DuckDB Browser WASM模块？——解决主文件依赖Node.js包导致浏览器无法运行的问题

我完全懂你的困扰——官方文档的静态部署说明确实漏掉了关键细节：默认的duckdb-browser.mjs依赖Node.js风格的裸导入（比如import * as u from "apache-arrow"），直接在浏览器里跑肯定会报错。下面是两种靠谱的解决方案，全程不用打包工具：

方案1：使用预捆绑的完整浏览器版本（推荐） #

官方npm包其实提供了一个包含所有依赖（包括apache-arrow）的预捆绑版本，这个版本可以直接在浏览器中运行，不需要额外处理依赖。

操作步骤： #

1. 从@duckdb/duckdb-wasm的dist目录下载以下文件：
   • duckdb-browser-bundled.mjs（核心库，已打包所有依赖）
   • duckdb-mvp.wasm和duckdb-browser-mvp.worker.js（MVP版本的WASM模块与Worker脚本）
   • （可选）duckdb-eh.wasm和duckdb-browser-eh.worker.js（EH版本，支持WebAssembly异常处理）
2. 将所有文件放到你的静态资源目录（比如和HTML文件同目录）
3. 使用以下代码初始化DuckDB：

<script type="module">
import * as duckdb from './duckdb-browser-bundled.mjs';

const MANUAL_BUNDLES = {
    mvp: {
        mainModule: './duckdb-mvp.wasm',
        mainWorker: './duckdb-browser-mvp.worker.js',
    },
    eh: {
        mainModule: './duckdb-eh.wasm',
        mainWorker: './duckdb-browser-eh.worker.js',
    },
};

async function initDuckDB() {
    try {
        // 自动选择兼容当前浏览器的捆绑包
        const bundle = await duckdb.selectBundle(MANUAL_BUNDLES);
        // 创建Worker实例
        const worker = new Worker(bundle.mainWorker);
        // 初始化日志与DuckDB实例
        const logger = new duckdb.ConsoleLogger();
        const db = new duckdb.AsyncDuckDB(logger, worker);
        await db.instantiate(bundle.mainModule, bundle.pthreadWorker);

        // 测试连接与查询
        const conn = await db.connect();
        const result = await conn.query('SELECT 42 AS answer');
        console.log('查询结果:', result.toArray());
        await conn.close();
    } catch (err) {
        console.error('初始化DuckDB失败:', err);
    }
}

initDuckDB();
</script>

方案2：手动处理依赖（适合需自定义依赖的场景） #

如果你一定要使用未捆绑的duckdb-browser.mjs，可以通过Import Maps让浏览器识别Node.js风格的裸导入。

操作步骤： #

1. 下载duckdb-browser.mjs、对应的WASM/Worker文件，以及apache-arrow的ES模块版本（从npm包的dist目录获取apache-arrow/dist/es2015/index.mjs）
2. 在HTML中添加Import Map，映射apache-arrow到你下载的文件路径：

<script type="importmap">
{
  "imports": {
    "apache-arrow": "./apache-arrow.mjs"
  }
}
</script>

3. 之后正常导入duckdb-browser.mjs并初始化，代码和官方示例基本一致（只需修正文件路径即可）。

注意事项 #

• 确保所有文件的路径和代码中指定的路径完全匹配，否则会出现404错误
• 如果使用EH版本，需确认你的浏览器支持WebAssembly异常处理（大部分现代浏览器都支持）
• 预捆绑版本虽然体积稍大，但避免了依赖管理的麻烦，是静态部署的首选

内容的提问来源于stack exchange，提问作者Tomáš Zato