Node.jsとECMAScript Modules

1
console.log(import.meta);
2
// { url: 'file:///xxx/index.mjs' }

1
export const a = 1;
2
export default "dog";

1
// === 🙅bad ===
2

3
// ESMのコードをCJSで呼び出すことはできません
4
const test = require("./test"); // Must use import to load ES Module
5

6
// CJSにESMのSyntaxは存在しません
7
import { a } from "./test"; // SyntaxError: Unexpected token {
8

9
// ---------------------------------------------------------
10

11
// === 🙆 good ===
12

13
console.log(this); // {}
14

15
// dynamic import
16
// CJS内でもdynamic importの使用は可能です
17
(async () => {
18
  const test = await import("./test");
19

20
  console.log(test); // [Module] { a: 1, default: 'dog' }
21
})();

1
// === 🙅bad ===
2

3
// ESMにCJSのSyntaxは存在しません
4
const test = require("./test"); // ReferenceError: require is not defined
5

6
// __dirnameは定義されていないので、エラーとなります
7
console.log(__dirname);
8

9
// fsはNodeのネイティブモジュールであるため、CJSで書かれています
10
// モジュールがCJSの場合、named importは使えません
11
import { readdirSync } from "fs"; // syntaxError: The requested module 'fs' does not provide an export named 'readdirSync'
12

13
// ---------------------------------------------------------
14

15
// === 🙆 good ===
16

17
console.log(this); // undefined
18

19
import * as t from "./test";
20

21
console.log(import.meta); // { url: 'file:///xxxx/index.mjs' }
22

23
// whatwg urlに準拠しているので、urlと同様の書き方が可能です
24
import * as t from "file:///xxx/test";
25
console.log(t); // [Module] { a: 1, default: 'dog' }
26

27
// =========================
28
// CJSのモジュールをESMで入れる方法は以下のとおりです
29
import fs from "fs";
30
console.log(typeof fs.readdirSync);
31

32
// CJSはdefaultに包まれる
33
import * as fs from "fs";
34
console.log(typeof fs.default.readdirSync);
35

36
// defaultをfsにリネームする
37
import { default as fs } from "fs";
38
console.log(typeof fs.readdirSync);
39
// =========================
40

41
// dynamic import
42
(async () => {
43
  // whatwg urlでの指定が可能です
44
  // 今現在、file以外での取得は不可能です
45
  const baseURL = new URL("file://");
46
  baseURL.pathname = `${process.cwd()}/test.mjs`;
47

48
  const test = await import(baseURL);
49

50
  console.log(test); // [Module] { a: 1, default: 'dog' }
51
})();

1
var arguments;
2
arguments = [];
3

4
var eval = 1;
5
eval = eval;
6

7
// constは予約語ですが、letは違います
8
var implements,
9
  interface,
10
  package,
11
  private,
12
  protected,
13
  public,
14
  static,
15
  let,
16
  yield,
17
  await;

1
// HTMLコメントはCJSでは使えますが、ESMでは使えません
2
<!--\n
3
-->\n

1
0111;