ES6のエクスポートコマンドとインポートコマンド

モジュール機能は主に、export と import の 2 つのコマンドで構成されます。
モジュールは別ファイルであり、このファイル内の変数は外部から取得することはできません。この変数を外部から取得する場合は、export のみを使用してこの変数をファイル内にエクスポートし、この変数を外部からインポートします。

エクスポートコマンド

import は、いくつかの変数、関数、配列、定数などをエクスポートできます。
たとえば、variable.js ファイルでは、a と b という 2 つの変数が定義されているため、2 つの変数を外部で使用する場合は、exoprt を使用してこれら 2 つの変数をエクスポートできます。

export var a = 10;
export function fo() {
    
    
  ......
};

上記の記述方法は別の方法でも変更できます (より直感的な次の方法のみを使用することをお勧めします)。

var a = 10;
function fo() {
    
    
  ......
};
export {
    
    a, fo};

名前

通常、export によってエクスポートされる変数の名前は、元の変数名です (上記の例では、エクスポートされる変数名は a と fo です)。ただし、 asキーワードを使用して名前を変更できます。

......
export {
    
    a as v_a, fo as f_fo};

インポートコマンド

ここで、variable.js ファイル内の変数を test.js ファイルで使用するには、次のようにします。

import {
    
    a, fo} from './variable.js';
console.log(a);

ここでは、import コマンドを使用して、variable.js ファイルから a と fo をインポートします。import で直接受け入れられる中括弧。内部の値は、export でエクスポートされた値と同じである必要があります (つまり、前の手順で説明した名前。この名前は同じである必要があります)。
注: import コマンドで入力される変数はすべて読み取り専用です。これは、その本質が入力インターフェイスであるためです。つまり、モジュールをロードするスクリプト内のインターフェイスを書き換えることはできません。
importコマンドはコンパイルフェーズで実行されるため、最後に定義してもモジュールの先頭に昇格します。

名前

同様に、 asキーワードを使用してインポートの名前を変更することもできます。

import {
    
    a as v_a, fo as f_fo} from './variable.js';
......

全体的な負荷

上記で紹介した方法では、1 つずつロードすることも (つまり、選択的にロードすることもできます)、全体としてロードすることもできます。つまり、アスタリスク (*) を使用してオブジェクトとすべての出力値を指定します。はこのオブジェクトにロードされます:

import {
    
     * as v} from './variable.js';
console.log(v.a);

デフォルトのエクスポートコマンド

上記の import コマンドを使用するときは、エクスポート名を知っておく必要があります。ここで、エクスポート名に関係なく、エクスポート時にデフォルトを使用するメソッドを導入します。

function foo() {
    
    
  ......
}
export default foo;

その後、インポートするときに自分で名前を指定できます。

import customName from './variable.js';

ここで、customName はカスタム名であり、中括弧を使用する必要はありません。
エクスポートのデフォルトの本質は、次の値をデフォルト変数に割り当てることであることに注意してください。

// 正确
export default 10;
// 报错
export 10;

// 正确
export var a = 1;
// 错误
export default var a = 1;

インポートとエクスポートの複合書き込み

モジュール A では、最初に imoortB、次に exprB を記述できます。

export {
    
     va, vb } from './B.js';

// 可以简单理解为
import {
    
     va, vb } from './B.js';
export {
    
     va, vb };

同様に、複合書き込みメソッドは、名前変更、全体の出力、およびデフォルト インターフェイスの書き込みメソッドもサポートしています。

// 接口改名
export {
    
     va as v_a, vb as v_b } from './B.js';
// 整体输出
export * from './B.js';
// 默认输出
export {
    
     default } from './B.js';

名前付きインターフェースをデフォルトインターフェースに変更する記述方法は以下のとおりです。

export {
    
     va as default } from './B.js';

// 等同于
import {
    
     va } from './B.js';
export default va;