Slik bruker du import og export

Kan du alle mulighetene i ES2015?

🎥: Mikael Brevik Vis mer

De fleste webutviklere har brukt import og export i Javascript. Og de fleste føler kanskje at de har relativt kontroll på importere og eksportere kode mellom filer på denne måten.

Men har du for eksempel vurdert å bruke noe annet enn export default? Og vet du hva slags andre muligheter import og export gir deg?

Mikael Brevik er her for å fortelle deg!

I dagens Kodesnutt går han gjennom noen av de mange mulighetene ES2015-syntaksen gir deg, med eksempler som kjører i Node. Videoen ser du over.

Og vil du bare se det som kode, har vi først en bolk fra Brevik om de ulike import-mulighetene her:

import './module.mjs'; // side-effects

// === Import specific things
import sayHello from './module.mjs';
sayHello('Wade');

// === Can be named anything
import hello from './module.mjs';
hello('Wade');

// === Doesnt work if there is no default
import sayHello from './module.mjs';
sayHello('Wade');

// === Import non defaults
import { sayHello } from './module.mjs';
sayHello('Wade');

// === Must be correctly named
import { hello } from './module.mjs';
hello('Wade');

import { sayHello as hello } from './module.mjs';
hello('Wade');

// === Import multiple things
import {
  sayHello as hello,
  sayGoodbye
} from './module.mjs';
hello('Wade');
sayGoodbye('DP');

// === Import unknown things
import * as mod from './module.mjs';
console.log(mod);
mod.sayHello('Wade');
mod.sayGoodbye('DP');

// === Import unknown things
import * as mod from './module.mjs';
console.log(mod);

// === How about default AND multiple?
import something, {
  sayHello
} from './module.mjs';

something();
sayHello('Wade');

// === How about default AND multiple unknown?
import something, * as mod from './module.mjs';
something();
console.log(mod);

// === How about default AND multiple unknown?
import * as mod from './transitive.mjs';
console.log(mod);

import something from './transitive.mjs';
console.log(something);

import something, * as mod from './transitive.mjs';
console.log(something);
console.log(mod);

Og her ser du forskjellige måter å gjøre export på: 

console.log('Hello from module!');

// === Exporting one thing
export default function sayHello(name) {
  console.log('Hello,', name);
}

// === Can be declared somewhere else
function sayHello(name) {
  console.log('Hello,', name);
}
export default sayHello; // Notice semicolon here.

// === What if we want multiple things?
export function sayHello(name) {
  console.log('Hello,', name);
}
export function sayGoodbye(name) {
  console.log('Bye,', name);
}

// === Alternative way to export
function sayHello(name) {
  console.log('Hello,', name);
}
function sayGoodbye(name) {
  console.log('Bye,', name);
}
// export { sayHello, sayGoodbye };

// Or renamed
export {
  sayHello as hello,
  sayGoodbye as goodbye
};

// or values
export let v1 = 1,
  v2 = 2,
  v3;

// === Default and named
export default function saySomething(name) {
  console.log('Something');
}
export function sayHello(name) {
  console.log('Hello,', name);
}
export function sayGoodbye(name) {
  console.log('Bye,', name);
}

// === Alternative way
function saySomething(name) {
  console.log('Something');
}
function sayHello(name) {
  console.log('Hello,', name);
}
function sayGoodbye(name) {
  console.log('Bye,', name);
}

export {
  saySomething as default,
  sayHello,
  sayGoodbye
};