「JavaScript 第7版」を読む（10章：モジュール）

suzuki-navi

前回のスクラップの続き

ES6のモジュールについてだけ書くことにする。

suzuki-navi

importは最初の1回にだけ実行される。

以下の3つのファイルを用意する。sub2.jsは2回呼び出されているが、最初の1回しか実行されない。

hello.js

import * as sub from "./sub.js";
import * as sub2 from "./sub2.js";
console.log("hello.js");

sub.js

import * as sub2 from "./sub2.js";
console.log("sub.js");

sub2.js

console.log("sub2.js");

実行結果

sub2.js
sub.js
hello.js

suzuki-navi

importのパターン

import * as foo from "./foo.js"                   // foo.js の中の a を foo.a でアクセスできる
import { a, b } from "./foo.js"                   // foo.js の中の a を a だけでアクセスできる
import { a as foo_a, b as foo_b } from "./foo.js" // foo.js の中の a を foo_a でアクセスできる
import a from "./foo.js"                          // foo.js が export default していればそれを a でアクセスできる
import "./foo.js"                                 // foo.js の実行だけする

exportのパターン

export const a = ...;
export function a() { ... }
export class A { ... }
export { a, b }
export default class A { ... }

importしたものをすぐにexportするパターン

export { a } from "./foo.js";
export * from "./foo.js"
export { a as foo_a } from "./foo.js"
export { default as foo } from "./foo.js"
export { a as default } from "./foo.js"

suzuki-navi

HTMLのscriptタグに type="module" を付けるとdefer属性が自動で付く。直ちに実行されるのではなくHTMLの解析が完了してからの実行になる。

deferやasync属性のない同期的な実行の仕組みは、いまや非推奨のdocument.writeをブラウザがサポートするためにある。互換性のためだけであり、過去の遺産。

suzuki-navi

動的import

import("./foo.js").then(foo => {
    ...;
});

import * as foo from ./foo.js と同じような動きを動的に実行できる。

ES2020で導入された。関数呼び出しのように見えるが、演算子の扱いである。引数の文字列が現在実行中のモジュールからの相対パスとする必要があるため、関数の仕様にできない。

すべてのブラウザでサポートされている。

動的importは、webpackなどでバンドルしても静的にバンドルされないため、コードを分割できる。

suzuki-navi

import.meta.urlでモジュールを読み込んだURLを参照できる。

Node.jsでコマンドラインで実行すると file:// の形式になる。

console.log(import.meta.url); // file:///home/ec2-user/foo/hello.js

このスクラップは2023/07/16にクローズされました