在 PWA 服务工作者用例中将 sql.js 与 webpack 一起使用时出错答案

【问题标题】：Errors when I use sql.js with webpack in PWA service-worker usecase在 PWA 服务工作者用例中将 sql.js 与 webpack 一起使用时出错
【发布时间】：2021-07-31 05:42:18
【问题描述】：

我想在 PWA service-worker 中使用 sql-wasm.js (https://github.com/sql-js/sql.js)。我想使用它的原因是，通过 service-worker 获取 mbtiles（基于 sqlite 的 web 地图块分布格式），从中提取 web 地图块图像并将它们存储到索引数据库中。所以我想将 sql-wasm.js 用于纯只读用例。

我从我的 service-worker 中调用 sql-wasm.js，如下所示：

import initSqlJs from "./sql-wasm";
import "./sql-wasm.wasm";

...

  initSqlJs({}).then(SQL => {
    //Create the database
    var db = new SQL.Database();
    // Run a query without reading the results
    db.run("CREATE TABLE test (col1, col2);");
    // Insert two rows: (1,111) and (2,222)
    db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);

    // Prepare a statement
    var stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
    stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}

    // Bind new values
    stmt.bind({$start:1, $end:2});
    while(stmt.step()) { //
      var row = stmt.getAsObject();
      console.log('Here is a row: ' + JSON.stringify(row));
    }
  });

...

我的 webpack-config 包括：

    externals: { fs: 'fs', }

准备好这些之后，我运行 webpack (4.41.6)，然后我收到了这个警告

WARNING in ./src/weiwudi_gw_logic.js 78:2-11
"export 'default' (imported as 'initSqlJs') was not found in './sql-wasm'
 @ ./src/weiwudi_gw.js
 @ ./test/src/sw_npm.js

还有这些错误：

ERROR in ./src/sql-wasm.wasm
Module not found: Error: Can't resolve 'a' in 'F:\github\Weiwudi\src'
 @ ./src/sql-wasm.wasm
 @ ./src/weiwudi_gw_logic.js
 @ ./src/weiwudi_gw.js
 @ ./test/src/sw_npm.js

ERROR in ./src/sql-wasm.wasm
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* ./test/src/sw_npm.js --> ./src/weiwudi_gw.js --> ./src/weiwudi_gw_logic.js --> ./src/sql-wasm.wasm

如何避免这些错误/警告？

======

我已经从这张票 (Trying to understand how to import web-assembly package via webpack) 中获得了信息，但是添加 Experiments/asyncWebAssembly 选项仅适用于 webpack5。如果可能的话，我想用 webpack4 解决这个问题。不可能吗？

【问题讨论】：

标签： webpack progressive-web-apps service-worker webassembly sql.js

【解决方案1】：

最后我成功地在 PWA service worker 中使用了基于 wasm 的 sqlite，通过使用这个模块：

https://www.npmjs.com/package/sql-wasm

此模块包含 2 个文件

node_modules/sql-wasm/dist/esm/sql-wasm-browser.js
node_modules/sql-wasm/dist/sqlite3.wasm

使用它们进行一些修改，它工作正常。

将 sql-wasm-browser.js 与 service worker 的源代码放在同一文件夹中。
对 sql-wasm-browser.js 进行一些修改，以避免错误提示“文档未定义”

/* eslint-disable camelcase */
const document = {}; //<= Add this
var createSqlite3Api = (function (module) {

从 Service Worker 的源代码中调用它。

import createSqlWasm from "./sql-wasm-browser";

由 webpack 5 编译，带有 webpack.config：

    resolve: {
        fallback: {
            fs: false,
            path: false,
            crypto: false
        }
    }

将 sqlite3.wasm 与编译结果放在同一文件夹中。

然后它就可以正常工作了。

【讨论】：