[typescriptlang.org] handbook - modules

[Nolan Lawson] the cost of small modules

[Nolan Lawson] incomplete history of javascript bundlers

Dlaczego powstało Browserify? Chodziło o przeniesienie kodu ze środowiska Node.js do przeglądarek. Dwa problemy wymagały rozwiązania. Uruchomienie w przeglądarce kodu podzielonego na moduły w formacie CommonJS. Rozwiaząnie zależności, wczytanie plików, połączenie w jeden. Zamieniki dla używanych w Node.js process, Buffer, crypto, etc.

Dlaczego powstał Webpack? to create a dependency graph for all of the assets in a website – not just JavaScript, but also CSS, images, SVGs, and even HTML

[Axel Rauschmayer] ECMAScript modules in Node.js: the new plan, 2018

Hopefully, it will be unflagged in Node.js 14 (April 2020) and backported as far back as possible.

[Axel Rauschmayer] bundling JavaScript modules, 2015

[Jake Archibald] es modules in browsers

[Nicholas C. Zakas] es6 module loading more complicated than you think, 2016

Module JavaScript can be indistinguishable from non-module JavaScript.

[Lin Clark] es modules a cartoon deep dive, 2018

[Nicholas C. Zakas] encapsulating-code-with-modules

ECMAScript Modules

Moduł zawsze działa w trybie 'stric mode'

Moduł ma własny top-level scope. Zmienne tworzone w modułach nie są dodawane do global scope.

Top-level wskaźnik this jest undefined

export let color = "red"
export const size = 2
function add(x, y) {
  return x + y
}
export { add }
import { color, size, add } from "./module"
import * as config from "./module"

no matter how many times you use a module in import statements, the module will only be executed once. After the code to import the module executes, the instantiated module is kept in memory and reused whenever another import statement references it

UMD (Universal Module Definition)

Modłuł który będzie poprawnie inicjowany w przeglądarce oraz w środowisku Nodejs. Przed załadowaniem wykonuje sprawdzenie, środowiska:

module.exports = factory()
define(factory)
this.moduleName = factory()