どうも @scrpgilです。
突然ですが、半年以上前から、私はある問題を抱えていました。
それは、Ionic4(ionic/angular)の環境でnem2-sdkが動かないという問題です。nem2-sdkとはNEMという暗号通貨を扱いやすくするためのモジュールです。私は、個人プロダクトに、NEMを使うことがおおいんですが、Ionic4にアップグレードしてからnem2-sdkが動かなくなってしまっていたので、途方にくれてました。
しかしながら、昨日、Ionic4の環境でnem2-sdkを動かす方法がわかったので、その知見をまとめておきます。
＊NEMとは
余談ですが、NEMは、暗号通貨を扱うためのIFをAPIとして公開しており、もっぱらWeb開発やってる人でも扱いやすい暗号通過ですので、ブロックチェーンに興味がある方は是非、触ってみてください。
結論
次のリンクのプロジェクトを参考にしてください。
ionic start でblankで作成したプロジェクトでnem2-sdkを動かせるようにしたものを、GitHubにアップしています。
https://github.com/scrpgil/ionic4-angular8-nem2-sdk
これは、@44uk_i3 さんが、Angularでnem2-sdkを動かせるリポジトリをアップしていたので、それを参考にしたものです。本家は、Angular8とnem2-sdkの組み合わせですが、Ionic4(ionic/angular)にも応用できます。
https://github.com/44uk/ng2-with-nem-sample
変更したソースコード、patchsフォルダについては、patch-packageをググってみてください。
今回初めて使ったけど、便利。
問題点：なぜnem2-sdkは動かないのか？
そもそも、Ionic3の時代は動いていました。なぜ、Ionic4(ionic/angular)で動かなくなったかというと、ずばり、Angular8に上がったことによるWebpackの設定のせいです。
Ionic3の時代は、Ionicチームが作成した@ionic/app-scriptのWebpackの設定を利用していました。その時の設定では、nodeモジュールで利用するが、ブラウザで利用しないモジュールは、空のモジュールを利用するようにしていました。
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
この設定が、Angular8の@angular-devkit/build-angularでは見当たりません。そのため、ビルド時（ionic serveのとき）にエラーが発生するのでした。
正直、なぜこの設定が@angular-devkit/build-angularにないのかは、まだ調べきれていませんが、 react-scriptsにも同様の記載があり、この内容を拝借して、@angular-devkit/build-angularのWebpackの設定に追記すれば、無事利用することができました。
自分の学びまとめ
これで、nem2-sdkを使えるようになりました。また、今までなんとなく使っていたWebpackを書き換える方法、それを、patch-packageを使って、Gitで管理できることを学びました。
今後、Webpack周りを強化したいので、patch-packageを使ってガンガン触っていきたいと思います。
それでは。