[JS]ESモジュール

開発されたアプリケーションがますます大きくなると、ファイルを複数のファイルに分割する必要があります.
これらのファイルをモジュールと呼びます.
1つのライブラリは、1つのクラスまたは複数の特定の目的を持つ関数から構成されます.
JAvascriptもますます大きくなり、機能もますます複雑になります.
コミュニティはライブラリを作成し、モジュール化システムを実装します.

AMD, CommonJS, UMD

これらのモジュールシステムは現在よく使われていません.
ESモジュールシステムは2015年に標準、主要ブラウザまたはノードとして発表される.jsもサポートしています.

ESモジュール

モジュールにはファイルが1つしかありません.
モジュールにインジケータexport、importを適用して、他のモジュールを呼び出すことができる.
機能共有.exportインジケータを使用してエクスポートします.

export function sayHi(currentUser) {
    alert(`hi ${currentUser}`);
}

importインジケータを使用して読み込みます.

//다른파일
import {sayHi} from './hello.js';
`
sayHi(currentUser);

モジュールは特殊なキーワードとともに使用されるため、プロパティを設定できます.
スクリプトがモジュールであることをブラウザに知らせる.

<script type='module'>
  import {sayHi} from './hello.js';
  
  sayHi();
</script>

モジュールはローカルファイルでは機能しません.file://プロトコルを使用してページを開くと、importexportインジケータが動作しません.

モジュールのコア機能

厳格なモードで動作

モジュールは常に厳格モードuse strictにある.
宣言されていない変数に値を割り当てるなど、コードにエラーが発生します.

モジュールレベルスキャン

モジュールには独自のスキャンがあります.
モジュール内で定義された変数または関数は、他のスクリプトからアクセスできません.
必要な機能は、グローバル変数の代わりにhello.jsまたはuser.jsを呼び出すことによって得ることができます.
ブラウザ環境では、type=moduleによってモジュールを作成しても、独立したスキャンが発生します.

<script type='module'>
  let user = 'aa'
</script>

<script type='module'>
  alert(user); // error
</script>

評価は1回のみ

同じモジュールが複数の場所で使用されている場合は、最初の呼び出しのみが実行されます.
実行後の結果は、取得するモジュールのすべての場所に送信されます.
オブジェクトをエクスポートするモジュールを作成します.

export let user = {
	name : 'john',
}

このモジュールを使用するオブジェクトが多くても、評価は一度だけです.userオブジェクトが作成され、そのオブジェクトがすべてのモジュールに渡されます.
つまり、同じオブジェクトがすべて渡されます.

//1.js 
import {user} from './user.js';
user.name = 'yuno';

//2.js
import {user} from './user.js';
alert(user.name) // yuno

これらのプロパティを使用すると、モジュール設定を簡略化できます.
最初に実行するモジュールの構成が設定されている場合、他のモジュールはこの設定を受け入れることができます.
最初の実行スクリプトinit.jsで設定します.
他のスクリプトに格納されている情報も表示できます.

エクスポートと読み込みの方法。

宣言の前にエクスポートを貼り付け

変数、関数、クラスを宣言する場合は、exportを前に追加できます.

export function init() {...}

export let id = 5;

export class User {...}                        

しゅつりょく

まず、exportを一度に宣言することができます.

function init() {...}
let id = 5;
                 
export {init,id}; // init과 id를 내보냄

import

モジュールから導入する場合は、import {...}と記入するだけです.

import {init, id} from './user.js'; // init과 id를 가져옵니다.

import *

import * as user from './user.js'; // user.js에서 내보낸 모든것을 가져옵니다.

しかしながら、import *は、Webパッケージなどの構築ツールの最適化を妨げる可能性がある.
コンストラクションツールは、使用されていない関数を決定します.したがって、最後のバンドルには含まれません.

as

asキーワードを使用してインポートの名前を変更できます.exportでエクスポートする名前を指定することもできます.

//user.js
export {sayHi as hi};

// main.js
import {hi as alertHi} from './user.js';

default

モジュールは2種類あります.

複数の関数を持つライブラリタイプ

1つのオブジェクト

のみを宣言するモジュール(class User)

モジュールに1つのオブジェクトのみが宣言されている場合、defaultは1つのオブジェクトのみが宣言されていることを示します.

export default class User {...}

これにより、カッコを使用せずにモジュールをインポートできます.

import User from './user.js';

defaultモジュールは1つのモジュールしかないので、名称が異なっていてもインポートできます.
さらに、defualt exportのオブジェクトに名前を付ける必要はありません.
1つのファイルは、通常、default exportおよびnamed exportのみを使用します.