webpack - 在 PWA 服务工作者用例中将 sql.js 与 webpack 一起使用时出错
问题描述
我想在 PWA 服务工作者中使用 sql-wasm.js ( https://github.com/sql-js/sql.js )。我想使用它的原因是,通过 service-worker 获取 mbtiles(基于 sqlite 的 web 地图图块分布格式),从中提取 web 地图图块图像并将它们存储到索引数据库中。所以我想将 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-assembly 包),但添加 Experiments/asyncWebAssembly 选项仅适用于 webpack5。如果可能的话,我想用 webpack4 解决这个问题。这是不可能的吗?
解决方案
最后,通过使用这个模块,我成功地在 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
使用它们进行一些修改,它工作正常。
将 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 与编译结果放在同一文件夹中。
然后它工作正常。
推荐阅读
- angular - 发生错误 InvalidPipeArgument Angular 6
- react-native - RN Webview 未从项目级文件夹加载图像
- python - Flask SQLAlchemy:属性错误:“函数”对象没有属性“翻译”
- r - 如何在 R 中解析具有堆叠多个 JSON 的文件?
- python - 使用 python 和 boto3 for aws 来描述-spot-fleet-instances?
- java - 循环启动和关闭线程好吗?
- python - 有没有办法通过比较与其他行的距离来拟合行中的缺失值?
- laravel - Laravel 自定义多个同名字段的验证消息
- c++ - 需要静态模板方法的模板模板概念不满足约束
- java - 避免在 Android 应用程序上使用循环重复