Dynamic imports

Mit dynamic imports können wir JavaScript Module an jeder Stelle im Code importieren – nicht nur am Anfang. Dynamic imports verwenden Promises. Die Syntax sieht so aus:

import('./path-to-module.js')
  .then(module => {
    // do sth. with the module
  })
  .catch(error => {
    // handle error
  });

Das module-Objekt beinhaltet alle named und default exports:

library.js

export const one = 'named one';
export const two = 'named two';
export default 'default export';

main.js

import('./libary.js').then(module => {
  console.log(module);
});

// Console:
Module {Symbol(Symbol.toStringTag): "Module"}
  default: (...)
  one: (...)
  two: (...)
  // ...

Wir können named exports über ihren Namen ansprechen, und default exports über die default-Eigenschaft:

main.js

import('./library.js').then(module => {
  console.log(module.one);
  console.log(module.two);
  console.log(module.default);
});

Named exports können wir destrukturieren:

main.js

import('./library.js').then(module => {
  const { one, two } = module;
  console.log(one);
  console.log(two);
});

Allerdings können wir default nicht normal destrukturieren, da default ein reserviertes Keyword ist. Daher müssen wir dem default export einen anderen Variablennamen zuweisen:

main.js

import('./library.js').then(module => {
  const { default: library } = module;
  console.log(library);
});

// Console:
default export