Hallo T-Rex,

die Quelle, die PL verlinkt, wäre auch meine gewesen.

TL;DR: type="module" ist ein Feature von ECMAScript 6 (a.k.a. ECMAScript 2015), das erste Release des "Harmony" Projekts, das seit 2015 jährlich eine neue JS Version spezifiziert.

Die Idee von Modulen gibt's schon länger. Unser Wiki hat da einen recht alten Stand, das "Revealing Module Pattern", in dem man das, was ES6 mit type=module bietet, noch per Hand baut.

Es gibt auch diverse Javascript Libraries, wie z.B. require.js, die das Modulkonzept anbieten. Auch da musst Du Dich strikt an bestimmte Programmiermuster halten, damit das funktioniert.

Aber ES6 Module machen es im Prinzip genauso.

• Ein Modul exportiert bestimmte Objekte. Das können einfach nur Objekte sein, aber auch Konstruktoren für Funktionen.
• Ein Modul importiert optional andere Module und verwendet deren Exporte.
• Was ein Modul NICHT exportiert, ist im Modul privat.
• Genau wie bei klassischen Tools wie require.js gibt es Tools zum Bundling und Minifizieren von ES6 Modulen, damit eine Application, die aus 20 Modulen besteht, effizient geladen werden kann.

Damit eine .js Datei (oder besser: .mjs) als Modul geladen wird, muss es mit type="module" geladen werden. Script, das ins HTML eingebettet ist, ist per Definition kein Modul, kann also keinen import verwenden kann also nichts exportieren. Ein inline-<script type="module"> ist aber möglich, um andere Module zu importieren

Edit nach dem Hinweis aus der Unterwelt

Wichtig ist auch, dass das Modul mit einem Javascript MIME-Typ geliefert wird, und dass man Module von fremden Sites nur importieren kann, wenn man seine Seite mit passenden CORS Headern ausliefert. Korollar: Eine von file:/// geladene HTML Seite kann keine Module laden. Denn file:/// Ressourcen sind nie same-origin, Und eine file:/// Ressource kann keine Header bekommen.

Rolf