by Anggie Bratadinata

Import & Export Modul dalam ES6

Ekspor / impor modul ES6 memang sedikit bikin bingung. Soale cara ekspornya macem-macem, impornya juga macem-macem. Berikut ini catatan singkat tentang cara ekspor & impor.

Kalo mau nyoba kode2 di bawah, bisa pake Poi.

1. Anonymous default export

//file: src/vehicles/car.js
export default (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, ' drive');
    }
  }
)

Importnya:

//karena modul exportnya anonim, kita bisa pake
//nama sebarang
import Whatever from './vehicles/car';
Whatever('Toyota').drive();

2. Named default export

//file: src/vehicles/truck.js
const Truck = (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, 'drive');
    }
  }
)

export default Truck;

Importnya:

//import sesuai nama exportnya
import Truck from './vehicles/truck';
Truck('Hino').drive();

Default export hanya boleh ada satu di setiap file .js

3. Named export (non-default)

const Truck = (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, 'drive');
    }
  }
)

export Truck;

Alternatif, inline export:

export const Truck = (brand) => (
  //dst sama dgn di atas
)

Importnya:

//non-default diimpor pake curly-brace
import { Truck } from './vehicles/truck';
Truck('Hino').drive();

4. Kombinasi default & non-default export

//default
const Truck = (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, 'drive');
    }
  }
)

//Non-default
const Hino = () => (
  Object.assign(Truck(), { brand: 'Hino' })
)

export { Truck as default, Hino };

Importnya:

//default: Truck, non-default: Hino
import Truck, { Hino } from './vehicles/truck';
Truck('Mack').drive();
Hino().drive();

5. Import semua export (wildcard)

//file: src/vehicles/ship.js
const Ship = () => (
  {
    name: 'Some ship',
    sail() {
      console.log(this.name, 'sail');
    }
  }
)

const BlackPearl = () => (
  Object.assign(Ship(), { name: 'Black Pearl' })
)

export { Ship, BlackPearl };

Import semua:

import * as Ships from './vehicles/ship';
Ships.Ship().sail();
Ships.BlackPearl().sail();

6. Re-export & import “package”

Ini mirip wildcard import di ActionScript 3.0 / Java.

//file: src/animals/animal.js
export default {
  kind: undefined,
  die() {
    console.log(this.kind, 'die');
  }
}

//file: src/animals/dog.js
import Animal from './animal';
export default () => (
  Object.assign(Animal, { kind: 'Dog' })
)

//file: src/animals/tiger.js
import Animal from './animal';
export const Tiger = () => (
  Object.assign(Animal, { kind: 'Tiger' })
);

//file: src/animals/index.js
//re-export modul lain
export { default as Dog } from './dog';
export { Tiger } from './tiger';

Importnya:

//import "package", ga perlu satu2 cukup nama direktorinya
import { Dog, Tiger } from './animals';
Dog().die();
Tiger().die();

7. Alias

Misalnya ada dua modul yang exportnya (nama / defaultnya) sama & dua-duanya dipake di klien/file yang sama.

Misalnya kita punya modul Manager:

//file: src/company/hr/manager.js
const Manager = {
  dept: 'HR',
  job: 'Manager',
  whoami() {
    console.log(this.dept, this.job);
  }
}

export default Manager;

Ada modul lain yang juga export Manager:

//file: src/company/accounting/manager.js
export const Manager = {
  dept: 'Accounting',
  job: 'Manager',
  whoami() {
    console.log(this.dept, this.job);
  }
};

export default Manager;

Kalo dua-duanya dipake di klien yang sama:

import Manager from './company/hr/manager';
import Manager from './company/accounting/manager';

Pasti jadi error:

Dalam kasus kayak gini, kita pake alias.

import Manager from './company/hr/manager';
//manager kedua diimpor sebagai AcctManager
import { Manager as AcctManager } from './company/accounting/manager';

Manager.whoami();
AcctManager.whoami();

Kalo mau bacaan lebih lanjut:
Exploring ES6: Basic of ES6 Modules

Also in this category ...