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 ...
- » Website Baru
- » Global Dot di NodeJS
- » Compound Component
- » Membuat Public API di Komponen React dengan useImperativeHandle
- » useContext untuk Global State