Parcel v2+WebAssemblyって可能なの？
v2でも可能です
関連記事:
Rustが征くシリーズ過去記事
- WSL2で作るWindows開発環境: Rustが征く(1)
- wasmerでWebAssemblyの門を叩く: Rustが征く(2)
- JavaScriptからWebAssemblyの関数を呼び出す: Rustが征く(3)
- TypeScriptとRollupでWebassemblyを稼働させる: Rustが征く(4)
- SvelteでWebAssemblyでTypeScriptでRollupで: Rustが征く(5)
- WASMのサイズでかすぎね？: Rustが征く(6)
- Webassemblyマルチスレッド用crateを調べる: Rustが征く(7)
- WebAssemblyでSleep: Rustが征く(8)
------------------- ↓ 前書はここから ↓-------------------
JavaScriptのバンドラーには、
みんな大好きwebpackをはじめ、
rollup.js, fusebox, Parcel, snowpackなど、
雨後のタケノコのように一時期増えた。
そして最近は高速化がキーワードになっているようで、
Go製のesbuild, Rust製のswcなどが出ている。
そんな中比較的古参のParcelにも動きがあって、
parcel-bundlerと呼ばれるものは廃止。
v2で一部をC++で書き直し、
さらにbeta3ではトランスパイルをswcに置き換え、
先日めでたくVer2としてリリースされた模様。
ってことで、
じゃあParcelでWebAssemblyっていけるのかをちょっと試した。
結論から言うと使えそうだ。
高速化されてるし気軽に使えるのでいいかも。
ヾ(・ω<)ﾉ" 三三三● ⅱⅲ コロコロ♪
------------------- ↓ 本題はここから ↓-------------------
cargoコマンドでプロジェクト作成
cargo newにてcargoプロジェクトを作成する
今回はいろいろ省略するためにwasm-packデフォルトテンプレートを使用
cargo install cargo-edit wasm-pack wasm-bindgen-cli
wasm-pack new hello-parcel
cd hello-parcel
cargo upgrade
Parcelをインストール
npm init -y
npm i -D parcel rimraf
npx parcel --version
2.0.0
package.jsonを調整
mainディレクティブが出力先扱いになるので削除しておく。
- "main": "index.js",
WebAssemblyビルド開始
wasm-pack build --release --target web
フロント側を用意
最後ににindex.htmlを用意しておく
Rust側で設置したgreet関数をJS側から呼び出す
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>My awesome Rust, WebAssembly, and Parcel application</title>
<script type="module" src="./src/index.js"></script>
</head>
<body>
</body>
</html>
javaScriptはこんな感じ
import init, {greet} from '../pkg/hello_parcel.js'
(async () => {
console.log(await init())
greet()
})()
Parcelビルド開始
npx parcel ./index.html
(･∀･) いけるやん!
------------------- ↓ 後書はここから ↓-------------------
Web Workerを使う場合
Parcel2はWeb Workerもサポートしてるみたいなので、
マルチスレッドで実行する場合やマルチスレッドでWebAssemblyを使う場合もいけるっぽい
それについては別途記事にするやも
Discussion