📥

特殊なimport / export

2023/02/14に公開

import * as 構文

インポート先のモジュール全てをオブジェクトとして取得できる構文

user.js
const name = '太郎';
const age = 30;

export { name, age };

上でエクスポートしたname、ageというプロパティをもつuserオブジェクトとしてインポートしている

index.js
import * as user from './user.js';

const message = `${user.name}さんの年齢は${user.age}歳です。`:

Re-Export + Named Export

他のモジュールでエクスポートされたものを他のファイルでもエクスポートすること
例えば、下記のようなディレクトリ構造だったとする

├── index.js
├── user
│   ├── user.js
│   ├── index.js
user/user.js
const name = '太郎';
const age = 30;

export { name, age };
user/index.js
// user.jsのエクスポートされた変数をさらにそのままエクスポートしている
export * from './user.js' // user
index.js
import * as user from './user/index.js'; // user/index.jsからインポート

const message = `${user.name}さんの年齢は${user.age}歳です。`:

asで名前をつけつつRe-Exportする

user/index.js
// user.jsのエクスポートされた変数をさらにそのままエクスポートしている
export * as member from './user.js'
index.js
import * as user from './user/index.js'; // user/index.jsからインポート

const message = `${user.member.name}さんの年齢は${user.member.age}歳です。`:

この場合、export時に member オブジェクトとしてエクスポートしているのに対し、さらに * as user でインポートすることで userオブジェクトの中にさらにmemberオブジェクトが入っているという構造になる

exportするものを選びつつ一部の値だけをexportする

user/index.js
// nameだけをエクスポートする
export { name } from './user.js'

ageはエクスポートしていないので、user.ageは参照できずundefinedになる

index.js
import * as user from './user/index.js';

// user.nameは参照できるがuser.ageはundefinedになる
const message = `${user.name}さんの年齢は${user.age}歳です。`:

一部の値をRe-Export + エイリアス

user/index.js
// nameだけをエクスポートする
export { name as firstName, age as thirty } from './user.js'
index.js
import * as user from './user/index.js';

const message = `${user.firstName}さんの年齢は${user.thirty}歳です。`:

Re-Export + Default Export

Default ExportをそのままDefaultとしてExport

user/user.js
const name = '太郎';

export default name;

エクスポートした変数名ではなく、default と書くことでデフォルトエクスポートのままエクスポートができる

user/index.js
export { default } from './user.js'

デフォルトエクスポートの場合はimport時にasを使わなくても名前をつけることができるので、今回はtaroとしてインポートする

index.js
import taro from './user/index.js';

const message = `${taro}さん、こんにちは`:

Default Exportは実はNamed Exportのようなことをしている

as defaultでNamed Exportしているようなもの

user/user.js
const name = '太郎';
export { name as default };

ただし、Named Exportのようにそのまま default でインポートできるかというとそれはできない。
下記はエラーになる🙅🏻‍♀️

index.js
import { default } from './user/index.js';

defaultは予約語のためインポート時に変数として使うことは出来ない

index.js
import { default as name } from './user/index.js';

上記ならOK🙆🏻‍♀️

Default ExportをNamed Exportに変えてExport

user/user.js
const name = '太郎';

export default name; // Default Export
user/index.js
export { default as name } from './user.js'
index.js
import { name } from './user/index.js';

const message = `${name}さん、こんにちは`:

Named ExportをDefault Exportに変えてExport

user/user.js
const name = '太郎';

export { name }; // Named Export

as defaultすることで、デフォルトエクスポートに変えることができる

user/index.js
export { name as default } from './user.js'
index.js
import Taro from './user/index.js';

const message = `${Taro}さん、こんにちは`:

Side Effect Import

変数や関数をインポートすることなく、モジュール自体をインポートするもの

side-effect.js
alert('side-effect.jsがimportされました');
index.js
import './side-effect.js' // side-effect.js内の処理が実行される

side-effect.js自体をインポートしており、side-effect.js 内のalertが実行されます。

Discussion