Zenn
Open3

TypeScriptプロジェクトの一部をRust→WASMで実装する

Rust
TypeScript
WebAssembly
Screeps
みつよしみつよし

環境構築

WASMをnpmパッケージとして構築するらしい

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm

※ npm アカウントの取得は行わず、生成したnpmパッケージはローカルに置いたまま使用する

# プロジェクトは https://github.com/screepers/screeps-typescript-starter を使用する

# 適当なディレクトリに移動してRustプロジェクトを作成
$ cd src
$ cargo new --lib wasm

$ cargo install wasm-pack
# Cargo.tomlが変更されないが合ってるのか？

$ cd wasm
# チュートリアルに従いsrc/lib.rsとCargo.tomlの内容を編集

# ビルド
$ wasm-pack build
# pkgディレクトリと中身が生成される

# ローカルパッケージの参照を作成
$ npm install ./src/wasm/pkg
# package.jsonに追加される

$ rollup -c
[!] Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
# WASMを解釈できないためrollupにプラグインを入れる必要がある

# 参考： https://zenn.dev/dozo/articles/0b5940f1994a6c
$ yarn add --dev @wesley-clements/rollup-plugin-raw-wasm

rollup.config.js に以下の設定を追加

import { rawWasm } from '@wesley-clements/rollup-plugin-raw-wasm';

...

export default {
  ...
  plugins: [
    ...
    rawWasm({
      publicPath: "./dist/"
    })
  ]
}
みつよしみつよし

トラブルシューティング

$ yarn install 時にnodeバージョン不整合が起きる①

$ yarn install
yarn install v1.22.10
info No lockfile found.
[1/5] 🔍  Validating package.json...
error screeps-typescript-starter@3.0.0: The engine "node" is incompatible with this module. Expected version "10.x || 12.x". Got "16.7.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

後述の理由で10.x系を使うべき

$ yarn install 時にnodeバージョン不整合が起きる②

$ yarn install
yarn install v1.22.10
info No lockfile found.
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
error lru-cache@7.8.1: The engine "node" is incompatible with this module. Expected version ">=12". Got "10.24.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

package.jsonの依存関係の記述を破棄してひとつひとつ $ yarn add する

$ yarn add --dev @rollup/plugin-commonjs @rollup/plugin-node-resolve @types/lodash @types/screeps @types/screeps-profiler @wesley-clements/rollup-plugin-raw-wasm rollup rollup-plugin-clean rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-screeps rollup-plugin-typescript2 screeps-profiler typescript

"@wesley-clements/rollup-plugin-raw-wasm": "^0.1.8",
"source-map": "~0.6.1",
"wasm": "file:src/wasm/pkg"

$ rollup -c 時に Error: Cannot find module 'fs/promises'

nodeのバージョンが12.xだとfsがあるという扱いなのに実際にはないのでそうなるらしい
nodeをscreeps-typescript-starterが動作する10.x系に切り替える

Tool crashes with Error: Cannot find module 'fs/promises' when used in Node 12.x. This is due to this feature being introduced in Node 10 but then removed in later patches for Node 10 and Node 12. Works fine in Node 14. Node.js documentation was incorrectly listing this as supported in Node 12
https://github.com/SAP-samples/hana-developer-cli-tool-example/issues/57

$ nvm ls-remote | grep 10.
...
       v10.24.0   (LTS: Dubnium)
       v10.24.1   (Latest LTS: Dubnium)
       v11.10.0
...

$ nvm install v10.24.1
$ node -v
v10.24.1

問題が解決しない

yarn.lock と node_modules を削除して $ yarn install