This is version 1 2 3 4 5 . It is not the current version, and thus it cannot be edited.

Back to current version Restore this version

RequireJS ist ein Framework 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, $) {
	[...]
});