[WebAssembly]かんたんindex.htmlでSQLite(sql.js, cdnjs)
最近ようやくViteをはじめてドキュメントを読みまくっているのですが、特徴のページに
プリコンパイルされた .wasm ファイルは直接インポートできます
https://ja.vitejs.dev/guide/features.html#webassembly
みたいなことが書かれていたので.wasmファイルが必要になり、色々調べた結果sql.jsが配布しているSQLiteのWASMバイナリをcdnjsから引っ張ってくるのが一番早かったのでダウンロードしてきました。
まあそれはそれとして今回はViteの解説ではなく、sql.jsを使えばindex.htmlだけで.wasmファイル読み込めるみたいなことがREADMEに書かれていたので、試したことを残しておきます。
cdnjsの場合1.4.0までは./dist/${file}に.wasmファイルがありますが、
1.5.0以降./${file}に.wasmファイルがあるため注意が必要です。
今回は1.6.2を使用しています。
ちなみに引数fileはsql-wasm.wasmなので、上記URLから.wasmファイルを読み込んでいることになります。
リンクをクリックすれば.wasmファイルが降ってきますね。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>SQLite</title>
<meta name="description" content="Zenn" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/sql-wasm.min.js"></script>
<script>
initSqlJs({
locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/${file}`
}).then(SQL => {
const db = new SQL.Database();
document.body.innerText = JSON.stringify(db.exec("SELECT sqlite_version();"));
});
</script>
</body>
</html>
こんな感じでindex.htmlを書けばSQLiteのVersionを表示できるので、誰でも簡単にWebAssemblyを始めることができます。
おわり。
Viteの勉強はつづく。
Author And Source
この問題について([WebAssembly]かんたんindex.htmlでSQLite(sql.js, cdnjs)), 我々は、より多くの情報をここで見つけました https://zenn.dev/tkithrta/articles/08c8d3c693dcad著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol