export と export default の違い

export キーワードは、1 つ以上の変数、関数、またはクラスをエクスポートするために使用されますが、export default キーワードは、1 つのデフォルトの変数、関数、またはクラスをエクスポートするために使用されます。他のモジュールでは、import キーワードを使用して、これらのエクスポートされた変数、関数、またはクラスをインポートできます。

1. export

1. エクスポート方法

• export で公開されたメンバーは、必ず {} で囲む必要があります。この形式を 必要に応じたエクスポート と呼びます。
• export では、複数のメンバーを公開できます。

// 直接エクスポート
export let str = `hello world!!!`;
export function fuc() {}

// 定義してからエクスポート
let str1 = 'hello';
let str2 = 'world';
let str3 = '!!!';
function func() {}
export { str1, str2, str3, func };

2. インポート方法

• export で複数のメンバーを公開した場合、特定のメンバーをインポートする際に {} に含めないことができます。
• export でエクスポートされたメンバーは、インポート時にエクスポート時の名前に厳密に従って {} で受け取る 必要があります。
• export でエクスポートされたメンバーをインポートする際に、別の変数名を付けたい場合は、as を使って別名を付けることができます。

import { str1, str2 as str2s } from 'xxx.js';
console.log(str1 + '====== ' + str2s); // hello======world

2. export default

1. エクスポート方法

• 1 つのモジュール内で、export default は 1 回のみエクスポートできます。
• 1 つのモジュール内で、export default と export を同時に使用してメンバーを公開できます。

// xxx.js
export const name = 'Red';
export const age = 20;

const obj = {
  name: 'Red',
  age: 20,
};
export default obj;

2. インポート方法

• export default で公開されたメンバーは、任意の変数を使用して受け取ることができます。

import user from 'xxx.js';
import { name, age } from 'xxx.js';
console.log(user);
console.log(name, age);