こんにちは。石川さんです。最近更新できていなかったので、中途半端ですが、最近の成果について記載します。AngularでKonvaを使ってTMのツールを作っているのですが、何やら警告が出ていたので、調べました！
出てきた警告は
「Warning: C:\……\xxx.component.ts depends on ‘konva’. CommonJS or AMD dependencies can cause optimization bailouts.」
なんか出ました。「ng serve」を実行すると、勝手にビルドが始まって、開発用のWebサーバーが起動するのですけど、ビルド終了時に上記のメッセージが出てまいりました。結構前から出てきていたように思うのですけど、まあこんなものなのかな、と、放置していました。ただ、システム開発をとことん極めます、と言っている人は、これを放置しちゃいけませんよねぇ、という気持ちになってきたので、調べます！
すぐ下に続きのメッセージが出ていましたので、まずはこちらを参照します。
「For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies」
なるほど、AngularaはCommonJSに依存することをおすすめしてないのですね。最適化されなくて、サイズが小さくならなくなることがあるので、ECMAScript(ES)モジュールにした方がよい、ということだそうです。
警告を消すだけなら
なるほど、angular.jsonファイルの中の「build」オプションの「allowedCommonJsDependencies」に「konva」を追加すれば、警告は消せそうですね。ちょっとやってみます。
既に「”allowedCommonJsDependencies”: [“dialog-polyfill”],」となっていたので追加してみます。「”allowedCommonJsDependencies”: [“dialog-polyfill”,”konva”],」に変更して保存、「ng serve」実行中だったのでCtrl+cでいったん終了して、再度「ng serve」を実行してみます。
お、警告が消えましたね。
もう少し調べます
警告が消えましたが、本当はKonvaをESモジュールにした方がよいのでしょうね。と、いうことで調査しました。しかし、Konvaのバージョン8.0.0で、「Full migration to ES modules package (!), commonjs code is removed.」と、ESモジュール対応されているようでした。と、いうことは、よくわかりませんが、とりあえずは警告を消しておけば大丈夫、かな？
まとめ
もっと突っ込んで調べようとしましたが、挫折しました。本来は、KonvaがESモジュールとして使えるはずなのに、Angularのビルダーが、CommonJSモジュールじゃないのかなぁ、と警告を出しているように思います。と、いうことでいったん終了です。