[Javascript] Minimize処理の落とし穴

先日、Minimize処理で、爆速Webページが作れる開発環境を構築したばかりですが、早速課題にぶち当たってしまいました。 備忘録がてら、その課題と、対策についてブログに残しておきたいと思います。

import.metaの落とし穴

main.jsでimportしまくっている各種モジュールと同時に、プラグイン的に、githubなどからcloneしてきたライブラリなども含まれており、それらをマルっとまとめて、"main.min.js" という1つのファイルに閉じ込めてしまう、minimize処理でエラーが発生。 エラーの内容は、「style.css 404 notfound」のようなことが書かれていた。 要するに、「style.cssが見当たらないよ」という事なのだが、もちろん、minimizeする前は、エラーは起きていない。 そこでライブラリ内の該当するコードを見てみたところ、以下のように書かれていた。 get dir(){ return import.meta.url.split("/").slice(0,-3).join("/") } import.metaは、ES独自の機能で、該当するモジュールのパス(url)を返す、所在確認などに使える命令で、slide(0,-3)は、3階層上に登る相対パスを表しているようだ。 要するに、3階層上から遷移する先に、style.css が置かれているんだけど、main.min.jsにまとめられてしまったことで、このライブラリの所在階層が変わってしまうというのが原因のようでした。 しまった・・・確かに、ライブラリは、その中で完結する仕組みとしては何も悪くないので、minimize処理としてなんとかしなければいけないという事なのか？？？

対応方法どれがいい？

AIと相談しながら、いくつかの対応方法が提示された。

1. ライブラリの修正

import.meta.urlに依存しなように修正するという方法で、 main.jsを基軸にするのであれば、ライブラリに相対パスを送ることで、ライブラリではパス整形して、正常なファイルの所在を得ることができます。 この指定がない場合は、ライブラリ側では、import.meta.urlを使用すればいいので、このやり方は悪くないですが、ライブラリによっては自分で修正できないものもあるのが、気になる。

esbuild の define でビルド時に埋め込む

// esbuild.config.js esbuild.build({ entryPoints: ["src/main.js"], bundle: true, outdir: "dist", define: { __LIB_BASE__: JSON.stringify("/assets/lib") } }) static get dir(){ return __LIB_BASE__ } 例えば、/libフォルダ内にある場合に、esbuildの設定に上記のように、__LIB_BASE__という置き換え文字をセットすることができる。 これで、正規パスを特定させるという方式が実現できるようだ。 だが、特定の開発環境で固定化するパスを埋め込めるのであれば有効だが、今回提供しているMinimizeモジュールは、汎用ツールなので、個別設定はできるだけやりたくない。

3. new URL('.', import.meta.url) を使う

static get dir(){ return new URL('.', import.meta.url).pathname } 上記の、split("/")という階層の書き方ではなく、この書き方にすると、相対パス的な取得はできるようになる。 この方式だと、以下のような違いで値が取得できる。(/lib/test.js の階層で読み込まれたモジュールの結果)

import.meta.url : http://192.168.64.1:5503/import.meta/lib/test.js new URL('.', import.meta.url).pathname : /import.meta/lib/

でも、そもそもこれでは、階層が切り替わる対応ができるわけではない。 ただ、URL値ではなく、相対パスを扱う場合は、この書き方の方が扱いやすそうなので、手法は学び取っておくことにしよう。

4. esbuildで bundle:false にする

以下のように記述することで、任意フォルダ内にあるjsファイルは、統合対象からは外すことができる。 esbuild.build({ entryPoints: ["src/main.js"], bundle: true, outdir: "dist", external: [ "./lib/**" ] }) ライブラリは、統合せずに、ローカルモジュールのみを統合するようにすると、ライブラリに気を使う必要がなくなるので、この方法を採用することにしよう。

ライブラリの心得

今回の件を踏まえて、ライブラリを使うときに、統合されても問題ない作りにする必要があるということが理解できた。 実質的に、import.metaをminimizeでいい感じにコンバートしてもらおうというのは、どう考えても無理なので、

あとがき

これまで、import.meta.urlは、たくさん使ってきたことを考えると、今後 Minimize処理がベースにする開発になるとしたら、そもそもの階層指定の方法を見直す必要があると、改めて考えさせられました。 ライブラリの作り方にも思考変更が必要だと気づかせてくれた今回の不具合に感謝!!