在PWA服务中使用sql.js与webpack一起使用时出错--工作人员使用

Question

我想在PWA服务工作者中使用SQLwasm.js (https://github.com/sql-js/sql.js)。我想使用它的原因是，由服务工作者获取mbtiles(基于sqlite的分布格式)，从中提取web地图块图像，并将它们存储到索引DB中。因此，我想将SQLwasm.js用于纯只读用例。

我从我的服务工作者调用SQLwasm.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配置包括：

    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)中获得了信息，但是添加实验/异步asyncWebAssembly选项只在webpack5中有效。如果可能的话，我想用webpack4修复这个问题。这不可能吗？

Answer 1

最后，通过使用以下模块，我成功地在PWA服务工作人员中使用了基于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

使用他们的一些修改，它的工作很好。

1. 将sql-wasm-browser.js与服务工作人员的源代码放在同一个文件夹中.

1. 对sql-wasm-browser.js添加了一些修改，以避免错误地说“文档未定义”

。

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

1. 从服务工作者的源代码.

调用

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

webpack 5用webpack.config:编写的

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

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

那它就能正常工作。