ES2020 でリリースされた import.meta について - 30歳からのプログラミング

ES2020 でimport.metaがリリースされた。
この機能を使うと、モジュールのメタ情報を取得することができる。
例えば、当該モジュールのパスを取得することができる。

モジュールのメタ情報を取得する機能であるため、CommonJS や Script モードで使用するとエラーになる。

import.metaでどのような情報を取得できるか、Node.js、Deno、ブラウザで試してみた。

それぞれのバージョンは以下の通り。

Node.js: 14.7.0
Deno: 1.2.2
Google Chrome: 84.0.4147.105

Node.js

前述の通り CommonJS だとエラーになるため、ES Modules で使う必要がある。

// SyntaxError: Cannot use 'import.meta' outside a module
console.log(import.meta);

Node.js で ES Modules を使う方法については、以下の記事に書いた。

numb86-tech.hatenablog.com

ES Modules として書かれたファイルなら、import.metaを使える。

// [Object: null prototype] {
//   url: 'file:///Users/numb/index.mjs'
// }
console.log(import.meta);

ES Modules では__dirnameや__filenameを使えないが、import.meta.urlでファイルパスを取得することができる。

// console.log(__dirname); // ReferenceError: __dirname is not defined
// console.log(__filename); // ReferenceError: __filename is not defined
console.log(import.meta.url); // file:///Users/numb/index.mjs

Deno

Deno では、urlの他にmainという名前の値を取得することができる。

console.log(import.meta); // { url: "file:///Users/numb/index.ts", main: true }

mainは、プログラムの起点として Deno に渡されたモジュールかどうかを、真偽値で持っている。

例えば、以下のモジュールがあったとする。

// meta-sub.ts
console.log(import.meta.main);
export const x = 1;

// meta.ts
import { x } from "./meta-sub.ts";
console.log(x);
console.log(import.meta.main);

この状況でmeta.tsを実行すると、meta.tsがメインのスクリプトとなるため（meta-sub.tsはmeta.tsに呼ばれているだけ）、meta-sub.tsのimport.meta.mainはfalseになる。

$ deno run meta.ts
false
1
true

meta-sub.tsを実行すれば、meta-sub.tsのimport.meta.mainはtrueになる。

$ deno run meta-sub.ts
true

ブラウザ

以下のコードを Deno で実行して、サーバを立てる。

import {
  listenAndServe,
} from "https://deno.land/std@0.63.0/http/mod.ts";

listenAndServe(
  { port: 8080 },
  async (req) => {
    if (req.method !== "GET") {
      req.respond({
        status: 405,
      });
      return;
    }

    switch (req.url) {
      case "/":
        req.respond({
          status: 200,
          headers: new Headers({
            "content-type": "text/html",
          }),
          body: await Deno.readFile("./index.html"),
        });
        break;

      case "/module.js":
        req.respond({
          status: 200,
          headers: new Headers({
            "content-type": "text/javascript",
          }),
          body: await Deno.readFile("./module.js"),
        });
        break;

      default:
        req.respond({
          status: 404,
          headers: new Headers({
            "content-type": "text/plain",
          }),
          body: "Not found\n",
        });
        break;
    }
  },
);

console.log("Server running on localhost:8080");

index.htmlとmodule.jsはそれぞれ、以下の内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ImportMeta</title>
</head>
<body>
  <script type="module" src="/module.js"></script>
</body>
</html>

console.log(Object.keys(import.meta));
console.log(import.meta.url);

この状態でhttp://localhost:8080/にアクセスするとindex.htmlが表示され、そのなかでmodule.jsを読み込む。
scriptタグにはtype="module"をつけているが、これがないと Script モードになってしまい、import.metaを使ったときにエラーになるので注意。

ブラウザのログには以下のように表示されており、import.meta.urlで当該ファイル（今回の場合はmodule.js）の URL を取得できることが分かる。