Verhindern Sie, dass RequireJS erforderliche Skripte zwischenspeichert

RequireJS scheint intern etwas zu tun, das die erforderlichen Javascript-Dateien zwischenspeichert. Wenn ich eine Änderung an einer der erforderlichen Dateien vornehme, muss ich die Datei umbenennen, damit die Änderungen übernommen werden.

Der übliche Trick, eine Versionsnummer als Querystring-Parameter an das Ende des Dateinamens anzuhängen, funktioniert bei requirejs nicht <script src="jsfile.js?v2"></script>

Was ich suche, ist eine Möglichkeit, dieses interne Cacheing von RequireJS-erforderlichen Skripten zu verhindern, ohne meine Skriptdateien bei jeder Aktualisierung umbenennen zu müssen.

Plattformübergreifende Lösung:

Ich verwende es jetzt urlArgs: "bust=" + (new Date()).getTime()für das automatische Cache-Busting während der Entwicklung und urlArgs: "bust=v2"für die Produktion, bei der ich die fest codierte Versionsnummer nach dem Rollout eines aktualisierten erforderlichen Skripts erhöhe.

Hinweis:

@Dustin Getz erwähnte kürzlich in einer Antwort, dass Chrome Developer Tools beim Debuggen Haltepunkte löschen, wenn Javascript-Dateien auf diese Weise kontinuierlich aktualisiert werden. Eine Problemumgehung besteht darin, debugger;Code zu schreiben , um in den meisten Javascript-Debuggern einen Haltepunkt auszulösen.

Serverspezifische Lösungen:

In den folgenden Antworten finden Sie spezifische Lösungen, die für Ihre Serverumgebung möglicherweise besser funktionieren, z. B. Node oder Apache.

RequireJS kann so konfiguriert werden, dass an jede der Skript-URLs ein Wert für das Cache-Busting angehängt wird.

Aus der RequireJS-Dokumentation ( http://requirejs.org/docs/api.html#config ):

urlArgs : Zusätzliche Abfragezeichenfolgenargumente, die an URLs angehängt werden, die RequireJS zum Abrufen von Ressourcen verwendet. Am nützlichsten, um Bust zwischenzuspeichern, wenn der Browser oder Server nicht richtig konfiguriert ist.

Beispiel: Anhängen von "v2" an alle Skripte:

require.config({
    urlArgs: "bust=v2"
});

Zu Entwicklungszwecken können Sie RequireJS zwingen, den Cache zu umgehen, indem Sie einen Zeitstempel anhängen:

require.config({
    urlArgs: "bust=" + (new Date()).getTime()
});

Verwenden Sie hierfür keine urlArgs!

Das Laden von Skripten berücksichtigt die HTTP-Caching-Header. (Skripte werden mit einem dynamisch eingefügten Skript geladen <script>, was bedeutet, dass die Anforderung genauso aussieht wie jedes alte Asset, das geladen wird.)

Stellen Sie Ihre Javascript-Assets mit den richtigen HTTP-Headern bereit, um das Caching während der Entwicklung zu deaktivieren.

Wenn Sie die urlArgs von require verwenden, bleiben die von Ihnen festgelegten Haltepunkte bei Aktualisierungen nicht erhalten. Am Ende müssen Sie debuggerAnweisungen überall in Ihren Code einfügen. Schlecht. Ich verwende es urlArgsfür Cache-Busting-Assets während Produktions-Upgrades mit dem Git Sha. Dann kann ich festlegen, dass mein Vermögen für immer zwischengespeichert wird und garantiert niemals veraltetes Vermögen hat.

In der Entwicklung verspotte ich alle Ajax-Anforderungen mit einer komplexen Mockjax- Konfiguration. Anschließend kann ich meine App im Nur-Javascript-Modus mit einem 10-Zeilen-Python-HTTP-Server mit deaktiviertem Caching bereitstellen . Dies hat sich für mich zu einer ziemlich großen "unternehmerischen" Anwendung mit Hunderten von erholsamen Webservice-Endpunkten ausgeweitet. Wir haben sogar einen Vertragsdesigner, der mit unserer realen Produktionscodebasis arbeiten kann, ohne ihm Zugriff auf unseren Backend-Code zu gewähren.

Die urlArgs-Lösung weist Probleme auf. Leider können Sie nicht alle Proxyserver steuern, die sich möglicherweise zwischen Ihnen und dem Webbrowser Ihres Benutzers befinden. Einige dieser Proxyserver können leider so konfiguriert werden, dass URL-Parameter beim Zwischenspeichern von Dateien ignoriert werden. In diesem Fall wird Ihrem Benutzer die falsche Version Ihrer JS-Datei zugestellt.

Ich gab schließlich auf und implementierte mein eigenes Update direkt in require.js. Wenn Sie bereit sind, Ihre Version der requirejs-Bibliothek zu ändern, funktioniert diese Lösung möglicherweise für Sie.

Sie können den Patch hier sehen:

https://github.com/jbcpollak/requirejs/commit/589ee0cdfe6f719cd761eee631ce68eee09a5a67

Nach dem Hinzufügen können Sie in Ihrer erforderlichen Konfiguration Folgendes tun:

var require = {
    baseUrl: "/scripts/",
    cacheSuffix: ".buildNumber"
}

Verwenden Sie Ihr Build-System oder Ihre Serverumgebung, um diese buildNumberdurch eine Revisions-ID / Softwareversion / Lieblingsfarbe zu ersetzen .

Verwendung erfordern wie folgt:

require(["myModule"], function() {
    // no-op;
});

Wird erforderlich sein, um diese Datei anzufordern:

http://yourserver.com/scripts/myModule.buildNumber.js

In unserer Serverumgebung verwenden wir Regeln zum Umschreiben von URLs, um die buildNumber zu entfernen und die richtige JS-Datei bereitzustellen. Auf diese Weise müssen wir uns nicht um das Umbenennen aller unserer JS-Dateien kümmern.

Der Patch ignoriert alle Skripte, die ein Protokoll angeben, und wirkt sich nicht auf Nicht-JS-Dateien aus.

Dies funktioniert gut für meine Umgebung, aber mir ist klar, dass einige Benutzer lieber ein Präfix als ein Suffix bevorzugen. Es sollte einfach sein, mein Commit an Ihre Bedürfnisse anzupassen.

Aktualisieren:

In der Pull-Request-Diskussion schlägt der Autor von requirejs vor, dass dies als Lösung für das Präfix der Revisionsnummer dienen könnte:

var require = {
    baseUrl: "/scripts/buildNumber."
};

Ich habe dies nicht versucht, aber die Implikation ist, dass dies die folgende URL anfordern würde:

http://yourserver.com/scripts/buildNumber.myModule.js

Was für viele Leute, die ein Präfix verwenden können, sehr gut funktionieren könnte.

Hier sind einige mögliche doppelte Fragen:

RequireJS und Proxy-Caching

require.js - Wie kann ich eine Version für erforderliche Module als Teil der URL festlegen?

Inspiriert vom Expire-Cache auf require.js data-main haben wir unser Bereitstellungsskript mit der folgenden Ant-Task aktualisiert:

<target name="deployWebsite">
    <untar src="${temp.dir}/website.tar.gz" dest="${website.dir}" compression="gzip" />       
    <!-- fetch latest buildNumber from build agent -->
    <replace file="${website.dir}/js/main.js" token="@Revision@" value="${buildNumber}" />
</target>

Wo der Anfang von main.js aussieht:

require.config({
    baseUrl: '/js',
    urlArgs: 'bust=@Revision@',
    ...
});

In Produktion

urlArgs kann Probleme verursachen!

Der Hauptautor von requirejs zieht es vor,urlArgs Folgendes nicht zu verwenden :

Für bereitgestellte Assets ziehe ich es vor, die Version oder den Hash für den gesamten Build als Build-Verzeichnis zu verwenden und dann einfach das zu ändern baseUrl für das Projekt verwendete Konfiguration , dass dieses versionierte Verzeichnis als verwendet wird baseUrl. Dann ändern sich keine anderen Dateien, und es hilft, einige Proxy-Probleme zu vermeiden, bei denen eine URL mit einer Abfragezeichenfolge möglicherweise nicht zwischengespeichert wird.

[Styling meins.]

Ich folge diesem Rat.

In Entwicklung

Ich bevorzuge die Verwendung eines Servers, der Dateien, die sich häufig ändern können, intelligent zwischenspeichert: einen Server, der bei Bedarf 304 ausgibt Last-Modifiedund darauf antwortet If-Modified-Since. Sogar ein Server, der auf dem Express- Set von Node basiert , um statische Dateien bereitzustellen, erledigt dies sofort. Es erfordert nichts mit meinem Browser zu tun und bringt keine Haltepunkte durcheinander.

Ich habe dieses Snippet aus AskApache genommen und es in eine separate .conf-Datei meines lokalen Apache-Webservers (in meinem Fall /etc/apache2/others/preventcaching.conf) gestellt:

<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</FilesMatch>

Für die Entwicklung funktioniert dies einwandfrei, ohne dass der Code geändert werden muss. Für die Produktion könnte ich den Ansatz von @ dvtoever verwenden.

Schnelle Lösung für die Entwicklung

Für die Entwicklung können Sie einfach den Cache in Chrome Dev Tools deaktivieren ( Deaktivieren des Chrome-Cache für die Website-Entwicklung ). Das Deaktivieren des Caches erfolgt nur, wenn das Dialogfeld "Entwicklertools" geöffnet ist. Sie müssen sich also nicht jedes Mal umschalten, wenn Sie diese Option durchsuchen.

Hinweis: Die Verwendung von ' urlArgs ' ist die richtige Lösung in der Produktion, damit Benutzer den neuesten Code erhalten. Das Debuggen wird jedoch schwierig, da Chrome bei jeder Aktualisierung Haltepunkte ungültig macht (da jedes Mal eine "neue" Datei bereitgestellt wird).

Ich empfehle nicht, ' urlArgs ' zu verwenden ' für Cache mit RequireJS zu verwenden. Da dies das Problem nicht vollständig löst. Wenn Sie eine Versionsnummer aktualisieren, werden alle Ressourcen heruntergeladen, obwohl Sie nur eine einzelne Ressource geändert haben.

Um dieses Problem zu beheben, empfehle ich die Verwendung von Grunt-Modulen wie 'filerev' zum Erstellen der Revisionsnummer. Darüber hinaus habe ich eine benutzerdefinierte Aufgabe in Gruntfile geschrieben, um die Revision zu aktualisieren, sofern dies nicht erforderlich ist.

Bei Bedarf kann ich das Code-Snippet für diese Aufgabe freigeben.

So mache ich es in Django / Flask (kann leicht an andere Sprachen / VCS-Systeme angepasst werden):

In Ihrem config.py(ich verwende dies in Python3, daher müssen Sie möglicherweise die Codierung in Python2 anpassen)

import subprocess
GIT_HASH = subprocess.check_output(['git', 'rev-parse', 'HEAD']).strip().decode('utf-8')

Dann in Ihrer Vorlage:

{% if config.DEBUG %}
     require.config({urlArgs: "bust=" + (new Date().getTime())});
{% else %}
    require.config({urlArgs: "bust=" + {{ config.GIT_HASH|tojson }}});
{% endif %}

• Erfordert keinen manuellen Erstellungsprozess
• git rev-parse HEADWird beim Start der App nur einmal ausgeführt und im configObjekt gespeichert

Dynamische Lösung (ohne urlArgs)

Für dieses Problem gibt es eine einfache Lösung, sodass Sie für jedes Modul eine eindeutige Versionsnummer laden können.

Sie können die ursprüngliche Funktion requirejs.load speichern, sie mit Ihrer eigenen Funktion überschreiben und Ihre geänderte URL erneut auf die ursprüngliche Funktion requirejs.load analysieren:

var load = requirejs.load;
requirejs.load = function (context, moduleId, url) {
    url += "?v=" + oRevision[moduleId];
    load(context, moduleId, url);
};

In unserem Erstellungsprozess habe ich "gulp-rev" verwendet, um eine Manifestdatei mit allen Überarbeitungen aller verwendeten Module zu erstellen. Vereinfachte Version meiner Schluckaufgabe:

gulp.task('gulp-revision', function() {
    var sManifestFileName = 'revision.js';

    return gulp.src(aGulpPaths)
        .pipe(rev())
        .pipe(rev.manifest(sManifestFileName, {
        transformer: {
            stringify: function(a) {
                var oAssetHashes = {};

                for(var k in a) {
                    var key = (k.substr(0, k.length - 3));

                    var sHash = a[k].substr(a[k].indexOf(".") - 10, 10);
                    oAssetHashes[key] = sHash;
                }

                return "define([], function() { return " + JSON.stringify(oAssetHashes) + "; });"
            }
        }
    }))
    .pipe(gulp.dest('./'));
});

Dadurch wird ein AMD-Modul mit den Revisionsnummern für moduleNames generiert, das in der Datei main.js als 'oRevision' enthalten ist. Dort überschreiben Sie die Funktion requirejs.load wie zuvor gezeigt.

Dies ist zusätzlich zu der von @phil mccull akzeptierten Antwort.

Ich verwende seine Methode, automatisiere aber auch den Prozess, indem ich eine T4-Vorlage erstelle, die vor dem Build ausgeführt werden soll.

Pre-Build-Befehle:

set textTemplatingPath="%CommonProgramFiles(x86)%\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe"
if %textTemplatingPath%=="\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe" set textTemplatingPath="%CommonProgramFiles%\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe"
%textTemplatingPath% "$(ProjectDir)CacheBuster.tt"

T4-Vorlage:

Generierte Datei:

In Variable speichern, bevor require.config.js geladen wird:

Referenz in require.config.js:

In meinem Fall wollte ich bei jedem Klick dasselbe Formular laden. Ich wollte nicht, dass die Änderungen, die ich an der Datei vorgenommen habe, erhalten bleiben. Es ist möglicherweise nicht genau für diesen Beitrag relevant, aber dies könnte eine mögliche Lösung auf der Clientseite sein, ohne die Konfiguration für erforderlich festzulegen. Anstatt den Inhalt direkt zu senden, können Sie eine Kopie der erforderlichen Datei erstellen und die eigentliche Datei intakt halten.

LoadFile(filePath){
    const file = require(filePath);
    const result = angular.copy(file);
    return result;
}