タイトル通り。
SPAモードにおいて、実際に動かしたり、試行錯誤して、今のところ自分なりに通せた方法をメモ。
thanks
公式ドキュメントのWeb Application / External Bundlerで記述されているWebpack例を参考にViteで置き換えた場合を記述していく。
パッケージインストール
$ npm install vite-plugin-node-polyfills \
vite-plugin-top-level-await \
vite-plugin-wasm \
symbol-crypto-wasm-web \
symbol-sdk
Vite設定追記
パッケージを追加したら、vite.config.tsに設定を追記していく。
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import topLevelAwait from 'vite-plugin-top-level-await';
import wasm from 'vite-plugin-wasm';
export default defineConfig({
resolve: {
alias: {
'symbol-crypto-wasm-node': 'symbol-crypto-wasm-web/symbol_crypto_wasm.js',
}
},
build: {
// 警告が出たので適当に大きめに設定
chunkSizeWarningLimit: 4096,
},
plugins: [
nodePolyfills({
include: [
'crypto'
],
globals: {
Buffer: true,
},
}),
topLevelAwait(),
wasm(),
// 以下省略
// .
// .
// .
- 公式のWebpack設定を参考にしつつ、
vite-plugin-node-polyfillsで対応を試みた - JS SDKのソースを検索してみて、動かすだけなら
cryptoだけを置き換えれば良さそうだった- 見落としはあるかも。動かないものがでたらまた調べる
-
streamも置き換えると謎のエラーがでて太刀打ちできなかった- なくても良いものだと信じたい
- ほかも雰囲気。こちらも駄目なことがあったらまた調べる
動作確認テスト用のReactコンポーネントスニペット
import { PrivateKey } from "symbol-sdk";
import { Network, SymbolFacade, descriptors } from "symbol-sdk/symbol";
export function SymbolSignTest() {
const facade = new SymbolFacade(Network.TESTNET);
const account = facade.createAccount(PrivateKey.random());
const descriptor = new descriptors.TransferTransactionV1Descriptor(account.address);
const transaction = facade.createTransactionFromTypedDescriptor(descriptor, account.publicKey, 100, 2 * 3600);
const signature = account.signTransaction(transaction);
const jsonPayload = facade.transactionFactory.static.attachSignature(transaction, signature);
return <pre style={{'whiteSpace': 'pre-wrap', 'overflowWrap': 'anywhere'}}><code>{jsonPayload}</code></pre>;
}
アカウントを生成して、簡単なトランザクションの作成と署名を実行して、ペイロードを吐き出してます。
ここまで動けば、（取得は任意の方法でREST APIから取得できるので、Symbolネットワークとの疎通としては十分かと。
React Router v7の例ですが、viteを使っているなら、同じ設定を流用できると思います。
おまけ
SvelteKit + @sveltejs/adapter-static でSSGしたときのviteの設定では、include: ['crypto']が入ると、画面が一瞬表示されるが、500エラーという表示になってしまった。
この設定を抜けば動作した。
何か勘違いがあるかもしれないし、こうしたら動いた程度の情報なので、そのレベルのメモです。