2019年に開発したマインスイーパーを更新しようと考えています。どこまで開発が進んだのか忘れてしまったので、Gradle、kotlin multi platform プラグインのドキュメントを読む事から始めることにしました。そういえば、Gradleがどのように最終成果のjavascriptを生成するか疑問に思っていた事を思い出しました。最初にマインスイーパーをリリースした時、javascript生成処理について理解できていなかったのでした。今回、それを理解するのに丁度よい機会と考えました。
ドキュメントを読んで、webpackを介して処理されることが判りました。build.gradleを実行すると、”jsBrowserProductionWebpack”タスクで、webpackが実行されます。build.gradleにおいてwebpackに関する設定を何もしていない場合は、 単に、エントリーとりして、プロジェクトのmain appが設定されています。app javascriptはすでに、srcディレクトリ配下のクラスとはリンクされています。 なぜすでにリンク済みのappをwebpackでbundleしなければならないか？それは、kotlinソースファイルでJSannotatinで宣言したjavascriptモジュールをバンドルするためなのです。”webpack” が “build/js/packages/<app>” ディレクトリで実行される事を理解しました。multi-platform pluginによって webpack.config.jsがこのディレクトリに生成されます。
kotlin multiplatform プラグインでは直接webpack.config.js を編集することはできません。 You can write some javascript in webpack.config.d ディレクトリにjavascriptを書くことで行います。そこにjavascriptがあると、 kotlin multiplatform plugin がそれを結合してwebpack.config.jsに挿入します。
一回のbuildコマンドで全てのリソースを用意したい。 デフォルトの “jsProductionWebpack” は kotlin.jsだけがリンクできるだけになっています。javascriptを用意して、全てのリソースを用意できるようにしました。
webpackについて初心者だったので、少しづつ学習しました。ファイル自体のハッシュ値をつけたファイルを生成する機能があることを知りました。合理的だと思います。ウェブページのscripタグにハッシュ値つきのファイル名を挿入するのは、面倒です。とういのも、ソースを変更する度にハッシュ値が変わってしまうからです。scriptタグに自動的にハッシュつきファイル名を挿入するツールが必要でした。 HtmlWebpackPluginで解決できるようでした。 HtmlWebpackPluginはscriptタグをあるejsテンプレートに挿入できます。そこで、もともとあったphpのウェブページを ejsテンプレートとして使いたいと思いました。一つの問題点がでてきました。用意するejsは、プロジェクト配下のsrcにあります。webpack プロジェクト配下のbuild/js/packages/<app>で実行されます。どうやって webpackに用意したejsテンプレートの位置をしらせるか？ 用意したejsテンプレートのプロジェクトの展開場所ごとに変わる絶対パスを、指定する必要があるのです。”gradle build”を実行した時に、ejsテンプレートの絶対パスを設定しなければならなかったのです。Webpack 設定はGradleによって、build時に生成されます。Gradleのbuildスクリプトでそれを制御しなければならないのです。今回の要望に対するkotlin multi-platform pluginによる標準的な方法は提供されていませんでした。そこで、 javascript評価された時に”webpack.config.d”にejsテンプレートを見つけるコードを書きました。
webpackだけでサイトを完成させるには、問題点が他にもありましたが、それは別の機会に…