ES モジュールの静的解析を活用し、有害なバレルと循環依存を避けることで、プロジェクトを構造化しましょう。
このレッスンを Kodokon で開くES モジュールは 静的 です。import と export 文は、コードが実行される前、ファイルが解析される時点で解決されます。これこそが ツリーシェイキング（決して import されないコードの除去）を可能にし、命名の誤りをビルド時に捕捉できるようにするものです。名前付きエクスポートか、デフォルトエクスポートか？ ほぼあらゆる面で名前付きエクスポートに軍配が上がります。リファクタしやすい名前変更、信頼できる自動補完、そして同じものを10通りの別名で import する余地がないこと。デフォルトは、モジュールが 1つ の明白なものをエクスポートする場合のために取っておきましょう。
export const TAX_RATE = 0.2;
export function applyTax(price) {
return price * (1 + TAX_RATE);
}
export default class Cart {
items = [];
add(item) {
this.items.push(item);
return this;
}
}消費する側には4つの形式があります。名前付き import（as による任意の別名付けあり）、デフォルト import、名前空間 import（* as）、そして名前空間の Promise を返す 動的 import import() です。最後のものは コード分割 の構成要素です。重いモジュール（エディタ、チャート、PDF）を、ユーザーが実際に必要とする瞬間にのみ読み込みます。
import Cart, { applyTax, TAX_RATE } from "./cart.js";
import * as cartModule from "./cart.js";
console.log(applyTax(100), TAX_RATE); // 120 0.2
console.log(cartModule.TAX_RATE); // 0.2
const lazy = await import("./cart.js");
const cart = new lazy.default();
console.log(cart instanceof Cart); // true構成については、技術的な種類別（controllers/、helpers/）よりも 機能別（features/cart/、features/auth/）に分割することを好みましょう。一緒に変わるコードは一緒に置かれ、機能を取り除くことは1つのフォルダを削除することを意味します。各機能を狭い入口を通して公開し、その入口を迂回するあらゆる import を境界違反として扱いましょう。
import("./module.js") は何を返しますか？