PWA サービスワーカーでsql-wasm.js ( https://github.com/sql-js/sql.js )を使いたいです。使いたい理由は、サービスワーカーで mbtiles(sqlite ベースの Web マップ タイル配布形式) を取得し、そこから Web マップ タイル画像を抽出し、インデックス付き DB に格納するためです。したがって、純粋に読み取り専用のユースケースには sql-wasm.js を使用したいと考えています。
次のように、サービス ワーカーから 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
これらのエラー/警告を回避するには?
======
このチケット ( webpack を介して Web アセンブリ パッケージをインポートする方法を理解しようとしている) から情報を既に取得していますが、experiment/asyncWebAssembly オプションの追加は webpack5 でのみ機能します。可能であれば、webpack4 でこれを修正したいと考えています。無理ですか?