[RequireJS] ist ein [Framework|Javascript Frameworks] zum Laden von Dependencies in Javascript.

!!!Konfiguration
Zunächst wird require.js selbst durch einen script-Tag im HTML-Header geladen:

{{{
<script type="text/javascript" src="js/require.js" data-main="main"></script>
}}}

Das main.js befindet sich üblicher Weise im Wurzelpfad der Anwendung, um andere Scripts relativ dazu laden zu können. Das Attribut data-main spezifiziert dabei das Main-Script.

!!!Main
Das Main kann wie folgt aussehen:

{{{
requirejs.config({
	paths: {
		jquery: "js/jquery-3.4.1.min",
		"jquery-ui": "js/jquery-ui.min",
		vue: "js/vue.min",
		"vue-jquery": "js/vue-jquery",
		reactor: "js/reactor",
		css: "js/require-css"
	}
});

require(["app/app"]);
}}}

__paths:__ Deklaration von Require-Dependencies, die mit einfachem Namen geladen werden können.
__require:__ Laden der eigentlichen App.

!!!Loader
Für andere Datentypen als JS-Dateien werden Loader als Plugins genutzt. Dafür wird die Syntax "ext!path/to/file" verwendet. "ext" ist dabei die Dateiextension, also z.B. "css". Require versucht dann automatisch das Dependency mit dem Namen "css" zu laden, also "css.js".

!!Loader für CSS
Der Loader für einen Dependency-Typ kann dabei selbst wieder unter "paths" definiert werden. Oben wird angegeben:

{{{
	css: "js/require-css"
}}}

Die require.css kann wie folgt aussehen:

{{{
define(["jquery"], function($) {
	return {
		load: function(name, req, onload, config) {
			onload($("<link>")
				.attr({
					type: "text/css",
					rel: "stylesheet",
					href: name + ".css"
				})
				.appendTo("head")
			);
		}
	};
});
}}}

Die CSS-Dateien können dann, wie JS-Requirements, im require- oder define-Statement geladen werden:

{{{
define(["vue", "jquery", "reactor", "app/test-element", "css!css/reactive-component"], function(Vue, $) {
	[...]
});
}}}