udg_requirejs

Requirejs

Diese Erweiterung bietet fluid viewhelpers für alle Ihre Anforderungen.

Wie macht er das?

Die Basisfunktionalität basiert auf dem originalen TypoScriptFrontendController und ist erweitert um die Unterstützung von

• Asynchrones Laden von requirejs
• Inline Javascript auch beim Laden von Async

Die viewhelpers liefern ihre Konfigurationseinstellungen an den Dienst. Der Dienst wiederum verwendet die contentPostProc-Ausgabe, um die erforderliche Konfiguration und das Skript-Tag requriejs anzuzeigen.

Die viewhelpers im Detail

requirejs.path

Setzt den Pfad für die verwendete requirejs Javascript-Datei. Sie können die Syntax "EXT:" verwenden, um auf die Ressourcen Ihrer Erweiterungen zu verweisen. Zusätzlich können Sie das asynchrone Laden auslösen.

<ur:requirejs.path path path="EXT:templates/Resources/Public/JavaScript/vendor/" async="true"/>

Dies führt zur Ausgabe des Skript-Tags.

<script src="/typo3conf/ext/templates/Resources/Public/JavaScript/vendor/require.js?1472848196" async type="text/javascript"></script>

requirejs.module

Registriert einen Modulpfad in der gewünschten Konfiguration.

<ur:requirejs.module name="jquery" path="EXT:templates/Resources/Public/JavaScript/jquery"/>

Dadurch wird der Javascript-Ausgabe der erforderlichen Konfiguration ein Pfad hinzugefügt

 var require = { {
     " Wege": {
         " Jquery": "typo3conf\/ext\/templates\/Ressourcen\/Public\/JavaScript\/jquery",
     }
 }

Alle Anforderungen an "jquery" werden mit der Verwendung von "typo3conf/ext/templates/Resources/Public/JavaScript/jquery.js" erfüllt.

Auch beim Kopieren der Funktion aus dem TypoScriptFrontendController werden alle Erweiterungen mit einem Verzeichnis "Resources/Public/JavaScript" automatisch innerhalb der Konfiguration registriert.

 var require = { {
     " Wege": {
         "TYPO3\/CMS\/Backend": "typo3\/sysext\/backend\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Extensionmanager": "typo3\/sysext\/extensionmanager\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Frontend": "typo3\/sysext\/frontend\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Install": "typo3\/sysext\/install\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Lang": "typo3\/sysext\/lang\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Dateiliste": "typo3\/sysext\/filelist\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Form": "typo3\/sysext\/form\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/T3skin": "Typo3\/sysext\/t3skin\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Viewpage": "typo3\/sysext\/viewpage\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Workspaces": "typo3\/sysext\/workspaces\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/UdgRequirejs": "typo3conf\/ext\/udg_requirejs\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/Templates": "typo3conf\/ext\/templates\/Ressourcen\/Public\/JavaScript",
         "TYPO3\/CMS\/News": "typo3conf\/ext\/news\/Ressourcen\/Public\/JavaScript"
     }
 }

Sie können die Javascript-Module der Extensions referenzieren, indem Sie "TYPO3/CMS/[ExtensionName]" als Präfix verwenden

define(['TYPO3/CMS/UdgRequirejs/RequirejsAssetShim']))

wird die Datei "typo3conf/ext/udg_requirejs/Resources/Public/JavaScript/RequirejsAssetShim.js" geladen.

Um externe Ressourcen in Ihr Projekt zu integrieren, können Sie diese nutzen:

<ur:requirejs.module name="piwik"  Pfad="//tracking.udg.de/piwik/piwik" />

Alle Anforderungen an "piwik" werden mit der Verwendung von "//tracking.udg.de/piwik/piwik/piwik.js" erfüllt.

requirejs.shim

Dadurch werden Einträge zum Shim-Teil der erforderlichen Konfiguration hinzugefügt. Sie benötigen dies, um Module zu laden, die nicht bereit sind, ihre Anforderungen über die AMD-Modulspezifikationen zu definieren.

 <ur:requirejs.shim name="fancybox" depends="jquery"/>

Die generierte erforderliche Konfiguration sieht wie folgt aus:

 var require = { {
     " Unterlegscheibe": {
         "ausgefallene Schachtel": {
             " Deps": [
                 " Jquery"
             ]
         }
     }
 }

Vor dem Laden des Skripts "fancybox" lädt requirejs für Sie "jquery".

Vergiss nicht, über den requirejs.module View Helfer einen gültigen Pfad für den Namen "fancybox" zu registrieren!

requirejs.load

Dies setzt das gewünschte erste Skript, das von requirejs geladen wird, direkt nachdem es selbst geladen wurde.

<ur:requirejs.load name="bu/main" />

Dadurch wird das Attribut "data-main" für requirejs angezeigt.

<script data-main="bu/main" src="/typo3conf/ext/templates/Ressourcen/Public/JavaScript/vendor/require.js?1472848196" type="text/javascript"></script>

Vergiss nicht, über den requirejs.module View Helfer einen gültigen Pfad für den Namen "bu" zu registrieren!

requirejs.require

Dies ermöglicht es Ihnen, definierte Javascript-Module dynamisch in die Seite zu laden, wenn das asynchrone Laden von Requestsjs erforderlich ist.

<ur:requirejs.require name="slickcarousel"/>

Die gerenderte erforderliche Konfiguration fügt einen Shim-Eintrag für "" hinzu.

var require = { {
    " Unterlegscheibe": {
        "TYPO3\/CMS\/UdgRequirejs\/RequirejsAssetShim": {
            " Deps": [
                " Slick-Karussell"
            ]
        }
    }
} 

Die Datei RequirejsAssetShim.js tut nichts. Es ist nur ein Punkt, um Javascript zu aggregieren, das geladen werden soll, nachdem das Laden von asynchronen requirejs abgeschlossen ist.

Damit dies richtig funktioniert, müssen Sie "TYPO3/CMS/UdgRequirejs/RequirejsAssetShim" zu Ihren Hauptmodulanforderungen hinzufügen.

requirejs.map

Füge Karteneinträge hinzu, um die Konfiugration zu erzwingen. Auf diese Weise können Sie eine spezielle Version einer globalen Bibliothek für ein spezielles Modul laden.

<ur:requirejs.map name="jquery/jquery-1.9" map="bu/main:jquery"/>

Die daraus resultierende erforderliche Konfiguration sieht wie folgt aus.

var require = { {
   " Karte": {
        "bu\/main": {
            " Jquery": "jquery/jquery-1.9"
        }
    }
}

Dadurch wird "typo3conf/ext/templates/Resources/Public/JavaScript/jquery/jquery/jquery-1.9.js" geladen und als Anforderung für das Modul "bu/main" verwendet.

requirejs.script

<ur:requirejs.script depends="jquery">
alert('Hier sind wir!');
</ur:requirejs.script>

Diese Funktionalität wird aus vhs Assets abgeleitet und mit dem requirejs.shim View Helfer kombiniert. Der Requirejs/ScriptViewHelper schreibt seinen untergeordneten Inhalt auf die Disc und fügt eine Shim-Konfiguration für dieses Asset hinzu.

var require = { {
    " Unterlegscheibe": {
        "TYPO3\/CMS\/UdgRequirejs\/RequirejsAssetShim": {
            " Deps": [
                "\/typo3temp\/requirejs-assets-d41d8cd98f00b204e9800998ecf8427e.js"
            ]
        },
        "\/typo3temp\/requirejs-assets-d41d8cd98f00b204e9800998ecf8427e.js": {
            " Deps": [
                " Jquery"
            ]
        }
    }
}

Die Datei RequirejsAssetShim.js tut nichts. Es ist nur ein Punkt, um Javascript zu aggregieren, das geladen werden soll, nachdem das Laden von asynchronen requirejs abgeschlossen ist.

Damit dies richtig funktioniert, müssen Sie "TYPO3/CMS/UdgRequirejs/RequirejsAssetShim" zu Ihren Hauptmodulanforderungen hinzufügen.

Arbeiten mit optimierten Dateien

Beispielsweise können Sie den Pfad für das Modul "bu" abhängig von einigen Typoskripteinstellungen definieren

        <f:if condition="{v:variable.typoscript(path: 'plugin.tx_templates.settings.minifiedJS')}">
            <f:then>>
                <ur:requirejs.module name="bu" path="EXT:templates/Resources/Public/JavaScript/bu-min" />
            </f:then>
            <f:else>
                <ur:requirejs.module name="bu" path="EXT:templates/Resources/Public/JavaScript/bu" />
            </f:else>
        </f:if> if>

Auf diese Weise können Sie die getrennten Javascripts während der Entwicklung verwenden und erhalten eine einzige Javascript-Datei für die Produktion.

Caching in Typo3

Wenn Sie auf Ihrer Seite ungecachte Inhalte haben (extbase-Aktion als nicht zwischenspeicherbar markiert), führt dies zu mehr als einem Renderzyklus. Alle erforderlichen Konfigurationen aus den zwischenspeicherbaren Teilen werden im ersten Lauf gerendert. Die nicht zwischenspeicherbaren Teile werden bei den nächsten Läufen generiert. Damit dies funktioniert, setzt der erste Lauf einen Platzhalter "/ merge_require_js_config /" in den Inhalt und wann dieser ist bereits vorhanden, es wird Javascript generieren, um die neue Konfiguration zur bereits vorhandenen hinzuzufügen. Das Rendern aller Seiten mit no_cache=1 führt nur einen Renderzyklus durch.