ES Modules

ES modules (ESM) - is a standard feature for splitting JS into separate files

  • ESM only works via HTTP(S). therefore opening HTML file directly with a browser will not work. for local development local server should be started
  • "use strict" is automatically enabled within ES modules
  • ESM replaces old techniques like CommonJS


<script type="module" src="/foo"> - adding module to HTML

  • such module will load other modules via importing. there is no need to connect them to HTML
  • once module is imported, module code is run. it is run only once, during first import. e.g. exported object will be same for each script which imports it
  • module can also export any functionality, which can be used out in another module, which imports
  • each module has its own scope

Importing

import - keyword used for a static import

  • static import is only possible into ES module


import() - function-like call that allows importing ES module dynamically, i.e. under some condition

  • it works asynchronously and returns promise
  • this also makes it possible to import ES module into simple non-module script

Named Import

import { foo } from './bar.js' - named import

  • extension is required


import { Michael as Mick } from './users.js' - named import with name change

import * as users from './users.js'; - import everything into foo variable

  • users.default - will contain default export

Default Import

import foo from './bar.js' - default import

  • in case of default import any name can be given to variable

Exporting

Named Export

export let month = 'June' - named export

  • any declaration can be exported


export { foo, bar } - export separated from declaration

  • is usually written at the end of file
  • technically export might appear before declaration in the code


export { foo as bar } - named export with changed name

export { foo } from './bar' - exporting from another file

export { foo as baz } from './bar' - exporting from another file with name change

Default Export

export default function() {...} - default export

  • unlike named export, default one should export expression, since variable name is not required for default export
  • there might be only one default export in file


export default foo - default export separated from declaration

  • this is the way how declaration can be exported with default export

Re-exporting

export { foo } from 'bar.js' - re-export specific export from another file

export * from './bar.js' - re-export everything exported from another file

export * as utils from './utils.js' - re-export everything exported from another file, and group into object

  • object will be accessible as single named import
  • is equivalent to:
  • import * as utils from './utils.js';
  • export { utils };


export { default } from 'bar' - re-exporting of default export from another file. such value will be accessible via default import

export { default as foo } from 'bar' - re-exporting of default export with name change. such value will be accessible via named import

;