importの場合#

importでは、デフォルトエクスポートされた値は、モジュール名の省略記号で直接参照できます。

1
// モジュールA.js
2
export default function add(x, y) {
3
  return x + y;
4
}
5

6
// モジュールB.js
7
import add from "./A";
8

9
const result = add(1, 2);
10

11
console.log(result); // 3

上記のコード例では、モジュールAからデフォルトエクスポートされた add 関数は、モジュールBで add という名前で直接参照できます。

requireの場合#

requireでは、デフォルトエクスポートされた値は、exports オブジェクトのプロパティとして参照できます。

1
// モジュールA.js
2
exports.add = function(x, y) {
3
  return x + y;
4
};
5

6
// モジュールB.js
7
const A = require("./A");
8

9
const result = A.add(1, 2);
10

11
console.log(result); // 3

上記のコード例では、モジュールAからデフォルトエクスポートされた add 関数は、モジュールBで A.add という名前で参照できます。

まとめ#

importとrequireにおけるデフォルトエクスポートの主な違いは以下の通りです。

デフォルトエクスポートを使用する際の注意点#

• デフォルトエクスポートはモジュールごとに1つしか使用できない
• 名前付きエクスポートと混在して使用できる

関連記事#

import と require の違い