export/import調査

default_exports.js

// 波括弧をつけないとデフォルトエクスポートがインポートされる
import Hoge from "./sample_2.js";
console.log( Hoge ); //default exports

// defaultキーワードの別名としてインポート
import { default as Fuga }from "./sample_2.js";
console.log( Fuga ); //default exports

// 名前付きと同時にimport
import {
    default as Piyo, 
    Foo
} from "./sample_2.js";
console.log(Piyo); //default exports
console.log( Foo );  //named exports

// 一括importした場合、defaultプロパティにデフォルトエクスポートが入っている
import * as Lib  from "./sample_2.js";
console.log( Lib.default); //default exports
console.log( Lib.Foo ); //named exports

import.js

// 関数helloをimport
import { hello } from "./sample.js";
hello('World'); //Hello World!

// 配列fooをimport
import { foo } from "./sample.js";
console.log(foo); //["bar", "baz"]

// 定数Hogeをimport
import { Hoge } from "./sample.js";
console.log(Hoge); //hoge

// クラスUserをimport
import { User } from "./sample.js";
console.log( (new User('tarou')).name ); //tarou

// デフォルトエクスポートを変数Sampleにインポート
import Sample  from "./sample.js";
Sample(); // default exports!

import_function.js

let path = "./sample.js";
import(path)
    .then((obj) => {
        // 各モジュールには、引数objのプロパティからアクセスできる。
        obj.hello('World');
        obj.default();
    });

named_exports.js

// 別名の設定
import { Hoge as Fuga }from "./sample.js";
console.log( Fuga ); //hoge

// 複数同時にimport
import {
    foo, 
    User as Tarou
} from "./sample.js";
console.log(foo); //['bar', 'baz']
console.log( (new Tarou('tarou').name) ); //tarou

// 一括import。すべての名前付きエクスポートをLibに読み込む
import * as Lib  from "./sample.js";
// プロパティ名でそれぞれのモジュールにアクセスできる
Lib.hello('World'); //Hello, World!
console.log( Lib.foo ); //['bar', 'baz']

sample.js

export function hello(str) {
  console.log( `Hello, ${str}!` );
} // セミコロンはつけない(関数式にならないよう注意)

// 配列fooのexport
export let foo = ['bar', 'baz'];

// 定数Hogeのexport
export const Hoge = 'hoge';

// クラスUserのexport
export class User {
  constructor(name) {
    this.name = name;
  }
}

// デフォルトエクスポート
export default function(){
  console.log('default exports!');
}