JavaScript -Module verstehen: Bündelung und Transporation

<script> </script> $ (function () {...});

Ihr eigener Anwendungscode wurde in der Regel unter einer globalen App -App genannt, um zu verhindern, dass die globale Umgebung verschmutzt ist. Ohne dies dauert es nur so lange, bis Sie Namenskollisionen haben und die Dinge auseinanderfallen.

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

die zukünftige

Bibliotheken exportieren Objekte in einem gemeinsamen Modulformat (ES6 -Module).

<span>export default function $() { ... }
</span>

Wir importieren ein Modul in ein lokales Zielfernrohr und verwenden es.

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

• Keine Globalen erforderlich?
• Quellreihenfolge Unabhängigkeit
• Zugriff auf NPM
• Sie müssen Ihren eigenen Anwendungscode
nicht namensspace namensspace
• laden Module jederzeit nach Bedarf dynamisch
laden

Das vorliegende

Es ist wirklich wirklich kompliziert. Erstens werden eine Vielzahl von Modulformaten verwendet:

• CommonJS
• AMD
• Umd
• ES6 -Module

Werkzeuge zum Bündeln von Vermögenswerten in verschiedenen Formen und Größen:

• Browserify
• jspm
• webpack
• rollup
• Brunch / Brocolli
• Kettenräder
• Bauen Sie Ihre eigenen mit Gulp / Grunzen
auf

Dann sollten Sie Transpiler verwenden, die Sie verwenden möchten:

• Babel für ES6
• Coffeescript
• TypeScript

Zusätzlich gibt es verschiedene Bibliotheken, die eine dynamische Belastung von Modulen ermöglichen:

• require.js
• System.js

Dies sind verkürzte Listen beliebter Tools, die derzeit verwendet werden - es ist ein Minenfeld für Anfänger und Experten gleichermaßen. Die Kosten für die Transporation beleuchten auch, dass Sie viele dieser Tools mischen und anpassen können und verschiedene Ergebnisse erzielen können.

Konsolidieren wir die Tools im Jahr 2016

Front-End-Entwickler verwenden seit langem Build-Tools, aber erst in den letzten Jahren haben wir gesehen, dass ein Build-Schritt zur Norm wurde. Werkzeuge wie Sass und CoffeeScript haben dazu beigetragen

JavaScript -Community hat 2015 einige große Verbesserungen vorgenommen, aber wir müssen die Tools im Jahr 2016 konsolidieren.

Ich stimme zu.

gulp und grunT waren in den letzten Jahren sehr beliebt. Diese Tools können Sie eine Reihe von Transformationen schreiben, um Ihr Vermögen durchzugeben. Sie wurden an große Effekte gewöhnt und sind immer noch beliebt, obwohl viele Leute die Tools direkt über NPM verwenden.

Persönlich ist es mir nicht mehr wichtig, Asset -Pipelines zu bauen. Ich suche minimale Konfigurationswerkzeuge, mit denen ich moderne Werkzeuge nach Bedarf verwenden kann: Dinge wie SASS, Autoprefixer, Babel und Coffeescript, ein richtiges Modul, ein ordnungsgemäßes Modul System und Lader, ohne sich um die Implementierung, Konfiguration und laufende Wartung sorgen zu müssen. Im Wesentlichen hat jeder Entwickler in den letzten Jahren Zeit in die Schaffung von Asset-Pipelines investiert. Dies ist eine Menge Renkung, die eine Menge neuer Stunde und viele verschwendete Stunden läuft.

Die Community ist über Tools wie Browserify, Webpack, JSPM, Kettenräder und Gulp unterteilt. Das ist nicht wirklich ein Problem, es ist nur verwirrend für alle, die versuchen, einen klaren Weg nach vorne zu verstehen.

Ausgangspunkte klaren

Es gibt einige Dinge, auf die wir uns einig sind:

• ES2015 -Module sind das einzige echte zukünftige Modulformat für JavaScript.
• Babel ist heute der ES2015 -Compiler der Wahl.
• native Lader sind noch eine Weile nicht in Browsern verfügbar. Ein Bericht über die Zukunft von JavaScript von Telerik legt nahe, dass die vollständige Unterstützung der ES2015 angesichts der Modul -Ladehürde über zwei Jahre dauern könnte.
• Wenn Sie jetzt Module verwenden möchten, wird dies höchstwahrscheinlich irgendwann CommonJs betreffen.

Schauen wir uns an, wie minimale Konfigurations -Setups mit Browserify, WebPack und JSPM aussehen. Dies sind die wichtigsten JavaScript -Bundler, über die Sie heute wissen können.

ein neues Projekt

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

in INDEX.HTML in Ihrem bevorzugten Texteditor

aktualisieren

<span>export default function $() { ... }
</span>

Wir benötigen auch einen Server, um den Code auszuführen-zum Beispiel Live-Server, ein großer HTTP-Server mit Little Zero-Configy mit Live-Reload-Funktion. Installieren Sie es weltweit mit NPM-Installation -g-Live-Server und führen Sie Live-Server aus dem Projektstamm aus, um zu starten.

Browserify

Mit

BrowSerify müssen Sie ('Module') im Browser durch Bündelung aller Ihrer Abhängigkeiten benötigen.

Öffnen Sie Src/lib.js und fügen Sie unser erstes Modul hinzu.

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

Öffnen Sie src/Eintrag.js und wir benötigen unser Modul und verwenden Sie es.

<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

Aktualisieren Sie den Abschnitt Skripte in package.json

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Führen Sie dieses Skript mit NPM aus browserify

aus.

browserify erstellt bündel.js im Projektwurzel und Sie sollten eine am besten ausgelöste Ausgabe an die Konsole sehen. Um mehr darüber zu erfahren, was Browserify tut und wie dieses Bündel erstellt wird, empfehle ich, die Einführung in das Browserify unter Egghead.io

anzusehen

Herzlichen Glückwunsch! Wir haben jetzt Module im Browser! ?

Ein weiterer wichtiger Vorteil von Browserify besteht darin, dass Sie nicht nur auf Module zugreifen können, die Sie autorieren, sondern auch auf NPM -Module, sondern auch auf Lodash, um zu sehen.

<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>

Src/lib.js

<span>var lib = require('./lib.js');
</span><span>console.log(lib.double(2));
</span>

bearbeiten

bearbeiten src/Eintrag.js und rufen Sie unsere neue Addfive -Funktion auf

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

Erstellen Sie das Bundle erneut mit NPM -Run -Browserify und im Browser sollten Sie eine 4 und eine 7 sehen, die zeigt, dass wir die Summenfunktion von Lodash erfolgreich importiert und verwendet haben.

Wenn Sie so weit gefolgt sind, wissen Sie jetzt alles, was Sie für die Verwendung von Modulen im Browser heute benötigen, dies bringt viele Vorteile, die wir zu Beginn umrissen haben.

• Keine Globalen erforderlich?
• Quellreihenfolge Unabhängigkeit
• Zugriff auf NPM
• Sie müssen Ihren eigenen Anwendungscode
nicht benennen.

wir werden uns später mit der dynamischen Belastung von Modulen zur Laufzeit befassen.

webpack

WebPack ist ein Modul -Bundler. Webpack nimmt Module mit Abhängigkeiten an und generiert statische Vermögenswerte, die diese Module darstellen.

Fügen wir package.json ein neues Skript hinzu, um WebPack

<span>export default function $() { ... }
</span>

anzurufen

Führen Sie es mit NPM aus, webpack

WebPack hat bündel.js umgeschrieben und die Ausgabe im Browser sollte genau gleich sein.

Versuchen Sie, NPM auszuführen, Browserify und NPM -Webpack ausführen und die Unterschiede in der kompilierten Bündel.js -Datei untersuchen. Es ist nicht wirklich wichtig zu verstehen, wie diese Tools intern funktionieren. Jedes Modul wird in eine Funktion innerhalb von bündel.js eingefügt und eine ID zugewiesen, damit sie nach Bedarf geladen werden kann.

Es gibt jedoch viel mehr bis Webpack! Es ist wirklich das Schweizer Armeemesser der Modulbundler. Webpack verfügt außerdem über großartige Tools für die Entwicklung des Boxs, Dinge wie den Ersatz für Hot Modul, das automatisch einzelne Module im Browser neu laden - ähnlich wie die Lackierung, jedoch ohne die Seite "Seite".

Es gibt auch eine wachsende Liste von Ladern für verschiedene Asset-Typen, selbst CSS mit CSS-Lader und Style-Loader-Loaders, die CSS in das JavaScript-Bundle kompilieren und zur Laufzeit in die Seite injizieren können. Dies liegt außerhalb des Rahmens dieses Artikels, aber bei der Erste Schritte mit WebPack finden Sie mehr.

JavaScript transpiler

Dies sind drei der beliebtesten Transpiler, die heute verwendet werden. Möglicherweise möchten Sie auch eine andere aus der sehr langen Liste von Sprachen verwenden, die zu JS kompilieren.

Bevor wir uns ansehen, wie wir sie mit unseren Modulbundler verwenden können, schauen wir uns an, wie die Tools zuerst direkt verwendet werden.

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

Coffeescript

Kaffee-Lib bearbeiten.Coffee

<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

Hinweis: CoffeeScript verwendet die CommonJS -Syntax für Module

Fügen Sie Package.json ein Skript hinzu, um den ausführbaren Kaffee

auszuführen.

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Führen Sie es mit NPM aus, Kaffee

TypeScript

bearbeiten ts-lib.ts

<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>

Hinweis: TypeScript hat eine eigene Syntax für Module, die wie eine Mischung aus ES2015 -Modulsyntax und CommonJs aussehen.

Fügen Sie Package.json ein Skript hinzu, um die ausführbare TSC -Datei

auszuführen

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

Führen Sie es mit NPM aus TSC

aus

The compiler will complain about not being able to find lodash as it requires a type definition to know how to work with external modules that aren’t TypeScript files. Sie können eine Definitionsdatei mit:

abrufen

<span>export default function $() { ... }
</span>

babel

ES6-lib.js

bearbeiten

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

Hinweis: Babel versteht die schöne neue ES2015 -Modulsyntax.

Babel benötigt eine Konfigurationsdatei zum Angeben, welche Voreinstellungen

verwendet werden sollen

<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

Fügen Sie Package.json ein Skript hinzu, um den Babel Cli

auszuführen

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Führen Sie es mit NPM Run Babel

aus

The files in /dist now contain ES5 code in CommonJS module format that will work perfectly with Browserify or Webpack as we used previously. Sie können entweder zuerst mit CommonJS zu ES5 umgehen und dann mit Bündel oder andere Pakete in einem einzigen Schritt ausführen.

Für Browserify gibt es Plugins Coffeefy, TSIFY und Babels, um zu transpilieren und zu bündeln.

Für Webpack gibt es Lader-Kaffee-Lader, TS-Lader und Babel-Loader, um Module in verschiedenen Sprachen zu benötigen.

jspm

JSPM ist ein Paketmanager für den Systemjs Universal Modul Loader, der oben auf dem dynamischen ES6 -Modul -Loader

basiert.

JSPM verfolgt einen anderen Ansatz und beginnt mit dem Modulloader -System.js. System.js ist ein Projekt, das der Laderspezifikation folgt, während es entwickelt wurde.

installieren und initialisieren Sie ein JSPM -Projekt

<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>

Accept all of the defaults and ensure that Babel is used as the transpiler, that will configure System.js to use Babel when it runs into ES6 style modules.

aktualisieren index.html zum Laden und Konfigurieren von System.js

<span>var lib = require('./lib.js');
</span><span>console.log(lib.double(2));
</span>

In the browser you’ll see a few requests being made and a 404 for lodash, this is because jspm loads packages from the jspm_packages directory by default.

Führen Sie JSPM Lodash aus, um Lodash in diesem Verzeichnis zu installieren, und Sie sollten die erwartete Ausgabe in der Konsole, A 4 und A 7, sehen.

• Unsere Eintrags.js -Datei wird dynamisch mit System.IMport ('SRC/Eintrag.js');
geladen;
• system.js lädt Eintrag.js, sieht, dass unser LIB -Modul es erfordert, also holt es es zur Laufzeit.
• System.js lädt lib.js, sieht, dass es Lodash/Sum benötigt und es auch abholt.

System.js weiß auch, wie man direkt mit ES6 arbeitet, die Eintrag aktualisieren.

<span>"scripts": {
</span>  <span>"browserify": "browserify ./src/entry.js -o ./bundle.js"
</span><span>},
</span>

Sie können auch versuchen, die mit ES5 kompilierten Versionen unseres Coffeescript- oder Typscript -Module zu laden, indem Sie diese Zeilen einzeln überzeugen. Eine andere Möglichkeit besteht

Fügen Sie Package.json ein endgültiges Skript hinzu, um ein Bündel mit JSPM

zu erstellen

Führen Sie es mit NPM aus JSPM

<span>npm install lodash --save-dev
</span>

aus

Das Skript-Tag für bündel.js in index.html und der Browser sollte ein produktionsbereites Bundle ohne zusätzliche HTTP-Anforderungen laden.

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

Webpack

überarbeiten

unser Webpack -Beispiel zuvor war das einfachste Beispiel mit den Standardoptionen, es hat Eintrags.js mit CommonJS -Modulen in ein einzelnes Bündel zusammengestellt. Wenn Sie mit WebPack mehr ausgefallene Dinge durchführen, möchten Sie eine benutzerdefinierte Konfigurationsdatei für die gesamte Loader -Konfiguration erstellen.

erstellen Sie webpack.config.js im Root des Projekts

<span>export default function $() { ... }
</span>

aktualisieren index.html, um nur die gebündelte Datei erneut zu laden.

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

Installieren Sie die Lader zum Transporieren mit Babel, Coffeescript und TypeScript

<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

Webpack global installieren und ohne Argumente ausführen, um das Bundle aus unserer Konfigurationsdatei zu erstellen.

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Jetzt, da WebPack diese Lader für diese Dateierweiterungen verwendet, können wir ES6, Coffeescript oder TypeScript von Entry.js verwenden. Probieren Sie es aus, indem Sie diese einzelne nacheinander übernehmen.

<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>

Es gibt so viel mehr zu Webpack als ich hier behandelt habe, aber diese einfachen Setups sind ein guter Ausgangspunkt.

dort und wieder zurück

Und so beenden wir unsere Erforschung von Modulen, sie lösen viele Probleme und können die Komplexität unserer Anwendungen wirklich verringern - wenn die Werkzeuge nicht in die Quere kommen. Wenn Sie noch nicht Module verwenden, ist jetzt die Zeit. Sie müssen keine unnötigen Stunden damit verbringen

WebPack ist der aktuelle Moloch und Sie können ihn so konfigurieren, dass es fast alles tut. JSPM ist ein großartiges Werkzeug für alle Ihre Bündelungsbedürfnisse und arbeitet mit einer Vielzahl von Formaten und verfügt über ein schönes Entwicklererlebnis. BrowSerify ist nach wie vor eine solide Option, der Großvater moderner Modulbundler - es hat das Ökosystem des Ökosystems gewachsen, um einige der beliebten Funktionen von Webpack (wie Bündelspalten und heißes Nachladen) zu enthalten. Endlich ist System.js perfekt, wenn Sie zur Laufzeit zusätzliche Module laden müssen.

Sie möchten nicht alle oben genannten Tools in einem Projekt verwenden, aber es ist wichtig, diese drei beliebten Optionen zu verstehen, und wie Sie Transpiler verwenden können, wenn dies erforderlich ist. Wenn Sie nur Module verwenden möchten, erledigt Browserify, JSPM oder WebPack mit den Standardoptionen den Job.

Halten Sie das Werkzeug einfach und das Konfigurationslicht. Happy Bündelung.

häufig gestellte Fragen (FAQs) zu JavaScript -Modulen, Bündelung und Transporation

Was ist der Unterschied zwischen JavaScript -Modulen, Bündelung und Transporation? Sie helfen bei der Organisation von Code und machen es aufrechterhalten und wiederverwendbarer. Bündelling hingegen ist das Kombinieren mehrerer JavaScript -Dateien in einer einzelnen Datei. Dies geschieht, um die Anzahl der HTTP -Anforderungen zu verringern, die die Leistung einer Webanwendung erheblich verbessern können. Transporing ist der Prozess des Konvertierens von Quellcode aus einer Sprache oder Version in eine andere. Im Kontext von JavaScript bezieht es sich häufig auf die Konvertierung neuerer JavaScript -Syntax in ältere Versionen für die Kompatibilität mit älteren Browsern. . Erstens reduziert es die Anzahl der HTTP -Anforderungen, indem mehrere JavaScript -Dateien in einem kombiniert werden. Dies kann die Leistung einer Webanwendung erheblich verbessern. Zweitens können Sie mit Bündelung Module in Browsern verwenden, die sie nicht unterstützen. Schließlich kann Bündelung auch einen Prozess namens Minification enthalten, der die Größe der JavaScript -Datei verringert und die Leistung weiter verbessert. Babel spielt eine entscheidende Rolle, um sicherzustellen, dass der JavaScript -Code für verschiedene Browser kompatibel ist. Dies geschieht durch die Konvertierung neuerer JavaScript -Syntax in ältere Versionen, die von den meisten Browsern unterstützt werden. Auf diese Weise können Entwickler die neuesten Funktionen von JavaScript verwenden, ohne sich über die Probleme mit dem Browser -Kompatibilität zu sorgen.

Wie funktioniert ein JavaScript -Modul? Funktionen, die andere Module verwenden können. Wenn ein Modul importiert wird, stehen seine exportierten Variablen oder Funktionen dem Importskript zur Verfügung. Dies ermöglicht die Wiederverwendung von Code und eine bessere Organisation von Code. Diese Tools bündeln nicht nur JavaScript -Dateien, sondern bieten auch Funktionen wie Codeaufteilung, faules Laden und Handhabung anderer Assets wie CSS und Bilder. Ermöglicht Entwicklern, moderne JavaScript mit den neuesten Funktionen und Syntax zu schreiben, ohne sich über Kompatibilitätsprobleme zu sorgen. Der Transpiler wandelt das moderne JavaScript in eine Version um, die mit den meisten Browsern kompatibel ist. Dies stellt sicher, dass der JavaScript -Code konsequent über verschiedene Browser ausgeführt wird.

Kann ich JavaScript -Module ohne Bündelung verwenden? Dies kann jedoch aufgrund mehrerer HTTP -Anfragen zu Leistungsproblemen führen. Außerdem unterstützen nicht alle Browser JavaScript -Module, daher kann die Bündelung dazu beitragen, die Kompatibilität zu gewährleisten. Die Anzahl der HTTP -Anfragen. Bei der Minifikation hingegen ist es der Prozess, unnötige Zeichen (wie Leerzeichen und Kommentare) aus der JavaScript -Datei zu entfernen, um die Größe zu verringern. Sowohl Bündelung als auch Minifikation können die Leistung einer Webanwendung verbessern. . Zu den zu berücksichtigenden Faktoren gehören die Größe Ihres Projekts, die benötigten Funktionen (wie Codeaufteilung oder Handhabung anderer Vermögenswerte) und Ihre persönliche Präferenz. Es ist eine gute Idee, ein paar verschiedene Tools auszuprobieren und zu sehen, welches für Ihr Projekt am besten geeignet ist. Module, Bündelung und Transporation sehen vielversprechend aus. Mit der kontinuierlichen Entwicklung von JavaScript können wir fortschrittlichere Funktionen und Syntax erwarten, die eine Transporation für die Kompatibilität mit älteren Browsern erfordern. Die Bündelung wird aus Leistungsgründen weiterhin wichtig sein. Was Module betrifft, werden sie zu einem Standardbestandteil von JavaScript, und wir können in Browsern eine bessere Unterstützung für sie erwarten.

Das obige ist der detaillierte Inhalt vonJavaScript -Module verstehen: Bündelung und Transporation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!