ES Moduleの Import Assertions が各環境で使えるようになるのも遠くない。
しかし現実のユースケースではまだまだモジュールバンドラーを使ってデプロイ前にモジュール解決を済ませることが多いだろうから、Import Assertionsを直接ブラウザ上で使用することは少ないだろう。
というわけでソースコードで Import Assertionsを使ったときに、webpack によるモジュール解決がどのように振る舞うかを調べてみた。なぜ調べる必要があったかというと、ドキュメンテーションが(そこそこ探した限りでは)見つからず、ブログなどのアンオフィシャルなものすら見当たらなかったからだ。だが、GitHubの履歴を見ると間違いなくImport Assertionsに対応する実装は加えられていたので、実態がどうなっているかは実際に動かして試すこととなった。
アサーションなし(ファイル拡張子による判別)
data.json
ファイルを拡張子付きのパスでインポートする。webpackはJSONのインポートをビルトインでサポートしており、これはそのまま自動的にJSONとしてパースされる。
![data.jsonのインポート(アサーションなし)](/images/webpack-esm-import-assertions/3c6255ea-b6c7-4055-8126-638d2819f0c3/bdce5bc6-e660-44c0-9d71-d070561965ff.png)
インポートのパスで拡張子を省略していても、デフォルトのwebpack設定が .json
の省略を許可しているので自動的に探索され、ファイルの拡張子からJSONであることを判別する。
![data.jsonのインポート(アサーションなし、拡張子省略)](/images/webpack-esm-import-assertions/3c6255ea-b6c7-4055-8126-638d2819f0c3/43d6e83e-451d-43a2-bceb-d8bbcac815a5.png)
つまり、ファイルの拡張子を削除するとwebpackはそのファイルがJSONであることがわからなくなり、モジュールのパースに失敗する。次の例では ./data
ファイルをインポートしようとしてパースできずにエラーになっている。
![dataのインポート(アサーションなし、拡張子なし)は失敗する](/images/webpack-esm-import-assertions/3c6255ea-b6c7-4055-8126-638d2819f0c3/2d106676-7b21-44d1-b08f-00d2ee1d1b62.png)
アサーションあり ( JSON )
ここからは Import Assertions によるファイル形式のアサーションを試みる。 assert { type: 'json' }
を付与し、先ほどの拡張子がないJSONファイルのインポートをすると、JSONであることを判別し、問題なくパースできていた。(エディタ上の赤線は無視してほしい)
![dataのインポート(JSONアサーションあり)は成功する](/images/webpack-esm-import-assertions/3c6255ea-b6c7-4055-8126-638d2819f0c3/f36b6050-c102-422f-b4bf-238b814bf26a.png)
その他のファイル形式のアサーション
webpackといえば Loader によってさまざまな形式のファイルをモジュール解決できるのが魅力だ。webpackの Import Assertions はJSON以外にも対応しているのか一応試してみた。
JSONの拡張であるJSON5のファイル data.json5
をパースできるか試してみた。事前に json5-loader
をインストールした上で、特にwebpack設定には手を入れずに type: 'json5'
を指定してみたが、これではモジュール解決できなかった。エラーを見るに、JSONとしてパースしようとして失敗したようだ。なぜJSONだと解釈したのだろうか?
![data.json5のパース(アサーションあり)は失敗](/images/webpack-esm-import-assertions/3c6255ea-b6c7-4055-8126-638d2819f0c3/11e6c8bd-1eb3-4717-aa28-3b98ca7089ef.png)
次に、 styles.postcss
というファイルを用意し、さらにwebpack設定に .css
ファイルについてのルールを追加した(一般的な style-loader
と css-loader
を通すもの)。そのうえで、 styles.postcss
ファイルを type: 'css'
だとアサーションしてインポートするとどうなるかを試してみた。
結果は以下のように、 .postcss
ファイルに対応する Loader がないためにパースできずエラーとなった。アサーションによって Loader を切り替えるようなことは(少なくとも今は)できないようだ。
![cssであることをアサーションで教えることはできなかった](/images/webpack-esm-import-assertions/3c6255ea-b6c7-4055-8126-638d2819f0c3/5248adea-7c1c-474f-9385-53a27fc9c807.png)
現状の結論
webpackのImport Assertions対応は、現状では JSON 形式のアサーションだけが可能なようだ。そもそも拡張子さえあればもともとJSONのインポートはビルトインサポートされていることから、この対応で何か新しい機能が増えているわけではない。
開発者はこれまでどおりアサーションなしにインポートしてもよいが、それはwebpackが気を利かせてくれているだけだ。そしてwebpack以外でもJSONを読み込める標準化された記法に切り替えるという選択肢も用意されている、ということだろう。
今回の調査は Stackblitz上の Node.js 環境で行った。再現したい場合はこちらを参照されたし。