みんな大好きJavaScriptのimport.metaにどんなプロパティがあるか調べてみた

Node.jsで動くJavaScriptとか書いているとimport.meta.urlとか書きますよね？
最近のNode.jsだとimport.meta.dirnameも使えたりするわけですけど、ちょっと古い環境では動かなかったりで困ったりしていて、そういえばどの環境だとどのimport.metaが使えるかよくわからないな、と思ったのでざっと調べてまとめようと思いました。

調べたドキュメントは、この辺りです。

• Living Standard:
  • https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system
• Node:
  • https://nodejs.org/api/esm.html#importmeta
• Deno:
  • https://docs.deno.com/examples/module_metadata_tutorial/
• Bun:
  • https://bun.sh/docs/api/import-meta
• Webpack:
  • https://webpack.js.org/api/module-variables/#importmeta
• Vite:
  • https://vite.dev/guide/env-and-mode.html
  • https://vite.dev/guide/features.html#glob-import
  • https://vite.dev/guide/api-hmr.html

ちなみにMDNで書いてあるのは、import.meta.urlとimport.meta.resolveだけです。
これは Living Standard のやつと一致しますね。

参考: MDN - import.meta

ご存知かと思いますが、ECMAScriptにはどのプロパティも書いてありません。

import.meta.url

そのスクリプトのURLが取れる。大体どこの環境でも使えると思う。
Living Standard にも書いてあるのでブラウザでも使えそう。

import.meta.resolve()

そのスクリプトからimport(specifier)した場合に取れるスクリプトのパスの文字列が取れるはずだけど、環境によってはPromiseを返すらしい。怖い。
あと第2引数を受け入れるかどうかはその環境次第だと思う。
動きは違うけど、大体どこの環境でも存在はすると思う。
Living Standard にも書いてあるのでブラウザでも使えそう。

import.meta.filename、import.meta.dirname

そのスクリプトのパスやディレクトリパスが取れる。
Node.js v20.11以降で使える。あとDenoとBunも大丈夫（バージョンは調べてない）。

import.meta.main

そのファイルがエントリーポイントかどうかがわかる。
DenoとBunで使える。

import.meta.path、import.meta.dir、import.meta.file

import.meta.pathはimport.meta.filename、import.meta.dirはimport.meta.dirnameと同じ。
import.meta.fileはそのファイル名が取れる。
Bunで使える。

import.meta.env

環境変数が取れる。
Bunで使える。あとViteではバンドル時に解決してくれる。

import.meta.glob()

Viteで使える。globを使って一括importできる。
ドキュメントはこちら→ https://vite.dev/guide/features.html#glob-import

import.meta.hot

Viteで使える。HMRのあれこれをするためのプロパティ。
ドキュメントはこちら→ https://vite.dev/guide/api-hmr.html

import.meta.webpack

Webpackで使える。Webpackのバージョンが取れる。

import.meta.webpackHot

Webpackで使える。HMRのやつ（かな？）
ドキュメントはこちら→ https://webpack.js.org/api/module-variables/#importmetawebpackhot

import.meta.webpackContext()

Webpackで使える。何かのコンテキストが取れる。
ドキュメントはこちら→ https://webpack.js.org/api/module-variables/#importmetawebpackcontext

あとがき

まだあるかもしれませんが、どうやって調べればいいかわからないのでこの辺で終わります。