Zenn
😽

Parcel v2+WebAssemblyって可能なの？

2021/10/18に公開
JavaScript
Rust
TypeScript
WebAssembly
parcel
tech

v2でも可能です

関連記事:

Rustが征くシリーズ過去記事

------------------- ↓ 前書はここから ↓-------------------

JavaScriptのバンドラーには、
みんな大好きwebpackをはじめ、
rollup.js, fusebox, Parcel, snowpackなど、
雨後のタケノコのように一時期増えた。

そして最近は高速化がキーワードになっているようで、
Go製のesbuild, Rust製のswcなどが出ている。

そんな中比較的古参のParcelにも動きがあって、
parcel-bundlerと呼ばれるものは廃止。
v2で一部をC++で書き直し、
さらにbeta3ではトランスパイルをswcに置き換え、
先日めでたくVer2としてリリースされた模様。

https://parceljs.org/blog/v2/

ってことで、
じゃあ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ディレクティブが出力先扱いになるので削除しておく。

package.json
- "main": "index.js",

WebAssemblyビルド開始

wasm-pack build --release --target web

フロント側を用意

最後ににindex.htmlを用意しておく
Rust側で設置したgreet関数をJS側から呼び出す

./index.html
<!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はこんな感じ

./src/index.js
import init, {greet} from '../pkg/hello_parcel.js'

(async () => {
    console.log(await init())
    greet()
})()

Parcelビルド開始

npx parcel ./index.html

\http://localhost:1234

(･∀･) いけるやん!

------------------- ↓ 後書はここから ↓-------------------

Web Workerを使う場合

Parcel2はWeb Workerもサポートしてるみたいなので、
マルチスレッドで実行する場合やマルチスレッドでWebAssemblyを使う場合もいけるっぽい
それについては別途記事にするやも

Discussion