javaScript zusammenführen

[Smart]

Hi,

ich habe eine javascript-Datei, in der eine Menge Funktionen drin stehen. Ich möchte nun jede dieser Funktionen in eine eigene Datei ablegen. So muss ich aber dann alle dieser Dateien in der Seite einbinden und das werden eine ganze menge sein.

<script src="datei1.js"></script>
<script src="datei2.js"></script>
<script src="datei3.js"></script>
<script src="datei4.js"></script>
...

Gibt es eine Möglichkeit, alle z.B. 2-4-Dateien in Datei1 einzubinden (etwas wie import) und dann nur die Datei1 in der Seite einzubinden?

Gruß

[henman]

Servus Smart

ich habe eine javascript-Datei, in der eine Menge Funktionen drin stehen. Ich möchte nun jede dieser Funktionen in eine eigene Datei ablegen. So muss ich aber dann alle dieser Dateien in der Seite einbinden und das werden eine ganze menge sein.

Bei diesem Problem könnte dir ein Task Runner helfen. Mit einem Task Runner kannst du dir verschiedene Tasks definieren, die durch eine einfache Konsoleneingabe ausgeführt werden.

Ich benutze grunt.

Für Grunt gibt es ein Modul grunt-contrib-concat, mit dem man mehrere Dateien zu einer zusammenführen kann. In Verbindung mit einem weiteren Modul grunt-contrib-watch lässt sich das sogar automatisieren, da dieses Modul auf Änderungen in Dateien reagiert und definierbare Tasks ausführt, zum Beispiel oben genanntes Concat.

Grunt erfordert schon ein wenig Einarbeitung, bietet aber für die Entwicklung viele Möglichkeiten, sich das Leben zu erleichtern.

ciao

[Smart]

Hallo,

vielen Dank. Das ist aber für eine einfache Zusammenfürung ziemlich aufwendig. Es muss einen einfacheren Weg geben.

Gruß

[Matthias Apsel]

Hallo Smart,

Es muss einen einfacheren Weg geben.

Ein include oder import innerhalb von JavaScripten gibt es m.W. aber nicht.

Bis demnächst
Matthias

[Auge]

Hallo

Es muss einen einfacheren Weg geben.

Ein include oder import innerhalb von JavaScripten gibt es m.W. aber nicht.

Man kann mit JS aber ein script-Element erzeugen (in's DOM einhängen). Auf diese Weise lässt sich der Aufruf mehrerer JS-Ressourcen durchaus zentralisieren.

Dass ich das, wie schon mehrfach verkündet, gerade dann, wenn so JS von anderen Domains nachgeladen wird, als extrem lästig empfinde und Eins-Zwei-Fix von einer solchen Seite weg bin, steht auf einem anderen Blatt.

Tschö, Auge

[Orlok]

Hallo

Ein include oder import innerhalb von JavaScripten gibt es m.W. aber nicht.

In JavaScript schon, bloß noch nicht im Browser. ;-)

Bis…

// localFile.js

var something = {
  someProperty : 'hello world',
  someMethod : function ( ) {
    return this.someProperty;
  }
};

export { something };

und

import { something } from 'localFile';

…funktioniert, wird es wohl noch etwas dauern.

Gruß,

Orlok

[1unitedpower]

Bis…

// localFile.js

var something = {
  someProperty : 'hello world',
  someMethod : function ( ) {
    return this.someProperty;
  }
};

export { something };

und

import { something } from 'localFile';

…funktioniert, wird es wohl noch etwas dauern.

Das kannst du auch schon heute haben, Imports funktionieren schon mit webpack, jspm, browserify und switch. Aber es stimmt, bis sie nativ in Browsern verfügbar sind, wird es noch eine Weile dauern, vor allem weil bis auf die Module-Syntax bisher nicht spezifiziert ist, wie die Module überhaupt geladen werden sollen.

[Orlok]

Hallo 1unitedpower

[…] vor allem weil bis auf die Module-Syntax bisher nicht spezifiziert ist, wie die Module überhaupt geladen werden sollen.

Jep, und mein Gefühl sagt mir, dass das in der Tat noch länger dauern wird. ;-)

Davon abgesehen: Hattest du meine Mail eigentlich bekommen?

Gruß,

Orlok

[Mitleser]

vielen Dank. Das ist aber für eine einfache Zusammenfürung ziemlich aufwendig. Es muss einen einfacheren Weg geben.

Vielleicht interessiert Dich mod_pagespeed

[Felix Riesterer]

Liebe(r) Smart,

Du möchtest also diverse JavaScript-Dateien nach Bedarf "nachladen". Das funktioniert analog zu dem Beispiel aus dem Fader-Framework-Artikel, bei dem eine CSS-Datei nachgeladen wird.

Du solltest Dir aber im Klaren darüber sein, dass viele einzelne Dateien viele HTTP-Requests bedeuten und das Laden der Seite deutlich verzögern. Schlauer wäre es, eine einzige JS-Datei zu laden, in der alle "Teile" schon enthalten sind. Und das Zusammenfassen kannst Du mittels einer serverseitigen Scriptsprache automatisieren (eine JS-Datei darf auch die Endung ".js.php" haben!).

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Schlauer wäre es, eine einzige JS-Datei zu laden, in der alle "Teile" schon enthalten sind. Und das Zusammenfassen kannst Du mittels einer serverseitigen Scriptsprache automatisieren

Wird das denn gecachet?

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

@@Felix Riesterer

Schlauer wäre es, eine einzige JS-Datei zu laden, in der alle "Teile" schon enthalten sind. Und das Zusammenfassen kannst Du mittels einer serverseitigen Scriptsprache automatisieren

Wird das denn gecachet?

Ist die Frage ernst gemeint? Falls ja: das hängt von der Implementierung ab. Scheiss Antwort? Vermutlich, aber eine genauere Antwort ist bei dieser Frage nicht möglich.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Schlauer wäre es, eine einzige JS-Datei zu laden, in der alle "Teile" schon enthalten sind. Und das Zusammenfassen kannst Du mittels einer serverseitigen Scriptsprache automatisieren

Wird das denn gecachet?

Ist die Frage ernst gemeint? Falls ja: das hängt von der Implementierung ab.

Ich denke, Felix hatte eine derartige PHP-Datei im Sinn:

readfile ('datei1.js');
readfile ('datei2.js');
readfile ('datei3.js');
readfile ('datei4.js');

Scheiss Antwort? Vermutlich, aber eine genauere Antwort ist bei dieser Frage nicht möglich.

Was muss man tun, damit gecachet wird?

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

Ich denke, Felix hatte eine derartige PHP-Datei im Sinn:

readfile ('datei1.js');
readfile ('datei2.js');
readfile ('datei3.js');
readfile ('datei4.js');

nein. Aber warum sollte ich jetzt schon genauer werden, wenn ich dem OP das selbst herausfinden lassen will? Immerhin verwendet er PHP-Sprachkonstrukte, die er im JavaScript-Umfeld vermisst.

Meine Lösung wäre das Generieren einer JavaScript-Datei, die immer dann neu erstellt wird, wenn eine der Komponenten neuer ist, als die Zusammenfassung. Diese wird dann am Ende ausgegeben. Mit passenden Headern für verschiedene HTTP-Requestarten (z.B. HEAD, GET) usw.

Liebe Grüße,

Felix Riesterer.

[Christian Kruse]

Hallo Gunnar,

die naive Implementation voraus gesetzt: die Frage ist nicht viel genauer.

Scheiss Antwort? Vermutlich, aber eine genauere Antwort ist bei dieser Frage nicht möglich.

Was muss man tun, damit gecachet wird?

Auf welcher Ebene? Auf Datei-System-Ebene? Am besten gar nichts, das macht das OS automatisch, abhängig von der Anzahl der Zugriffe auf die Datei. Wenn man es trotzdem möchte könnte man Lösungen mit SHM erwägen. Auf PHP-Ebene? Es gibt Lösungen wie OPCache. Oder man setzt einen Reverse-Proxy auf, der das Script-Result eine gewisse Zeit cached. Auf HTTP-Ebene? Last-Modified und Expires mitschicken, feiner justierbar und in den Möglichkeiten umfangreicher wird es durch die übrigen Caching-Header. Ausserdem könnte man einen Proxy nutzen.

Was genau möchtest du wissen?

LG,
CK