CommonJSとESM

CommonJSとESM

歴史的経緯からNode.jsはデフォルトでCommonJSを使っている
BabelはESM -> CommonJSに変換してくれる

構文の違い

• CommonJS
  • require、module.exportsの構文で同期的実行
• ESM
  • import、exportの構文で非同期
  • ファイルの先頭にホイスティングされる
  • JS標準

気になった用語

• IIFE
  • 即時関数
• AMD
  • Asynchronous Module Definition
• UMD
  • Universal Module Definition

CommonJSでもデフォルトエクスポートと名前付きエクスポートがある
混在することもできる

// math.js
module.exports = add; // デフォルト
module.exports.subtract = subtract; // 名前付き

const math = require('./math');

const add = math;
const subtract = math.subtract;
// ...

無名関数でラップしてスコープを限定する
requireしたmoduleは、キャッシュが使用されるので一度だけ評価される

modules.exports === exportsが後でも出てきそう

https://reflectoring.io/nodejs-modules-imports/

ほぼ同じ内容だった

モジュール

モジュールが一度だけ評価される（複数回importしても同じものとして扱う）のは「モジュールを 構成(configure) できるため実際に非常に便利です。」

import.meta

オブジェクト import.meta は現在のモジュールに関する情報を含んでいます。

bare module

ブラウザでは、import は相対URLか絶対URLどちらかの取得が必須です。

サマリ

• デフォルトでは遅延
• 非同期はインラインスクリプトで動作する
• 外部スクリプトは CORS ヘッダを必要とする
• 重複した外部スクリプトは無視される

https://ja.javascript.info/import-export

インポートし過ぎることを気にしないでください
例えば、巨大なコードライブラリから import * as library を行い、いくつかのメソッドのみを使用する場合、未使用のものは最適化されたバンドルには 含まれません。

へーそうなんだ

名前付きexportのほうが明示的で良い気がする
再export時にも、default exportはちょっと手間が必要

export * from './user.js' は名前付けエクスポートのみを再エクスポートし、デフォルトは含まれていません

モジュールの取得/評価のみでインポートはしない:
import "mod"

なるほど、ただモジュールを実行するための↑の場合もあるのか

https://ja.javascript.info/modules-dynamic-imports

import() は一見すると関数呼び出しに見えますが、たまたま括弧を使用している特別な構文です

マニアックだなぁ