Der jQuery-Quellcode verwendet Require.js, die endgültige Datei jedoch nicht?

Lesezeit: 3 Minuten

Der jQuery Quellcode verwendet Requirejs die endgultige Datei jedoch nicht
Sahat Yalkabov

Unkomprimierte jQuery-Datei: http://code.jquery.com/jquery-2.0.3.js
jQuery-Quellcode: https://github.com/jquery/jquery/blob/master/src/core.js

Was tun sie, um den Anschein zu erwecken, dass die endgültige Ausgabe Require.js unter der Haube nicht verwendet? In Require.js-Beispielen müssen Sie die gesamte Bibliothek in Ihren Code einfügen, damit sie als einzelne Datei eigenständig funktioniert.

Almond.js, eine kleinere Version von Require.js, weist Sie auch an, sich selbst in Ihren Code einzufügen, um eine eigenständige Javascript-Datei zu erhalten.

Wenn verkleinert, ist mir zusätzliches Aufblähen egal, es sind nur ein paar zusätzliche Killobytes (für Mandel.js), aber nicht verkleinert ist kaum lesbar. Ich muss ganz nach unten scrollen, vorbei an Mandel.js-Code, um meine Anwendungslogik zu sehen.

Frage

Wie kann ich meinen Code so gestalten, dass er jQuery ähnelt, bei dem die endgültige Ausgabe nicht wie ein Frankenweenie aussieht?

Der jQuery Quellcode verwendet Requirejs die endgultige Datei jedoch nicht
Louis

Kurze Antwort:

Sie müssen Ihre eigene benutzerdefinierte Build-Prozedur erstellen.

Lange Antwort

Die Build-Prozedur von jQuery funktioniert nur, weil jQuery seine Module nach einem Muster definiert, das a convert Funktion, um die Quelle in eine verteilte Datei umzuwandeln, die nicht verwendet define. Wenn jemand replizieren möchte, was jQuery tut, gibt es keine Abkürzung: 1) Die Module müssen nach einem Muster entworfen werden, das es ermöglicht, die define Anrufe, und 2) Sie müssen eine benutzerdefinierte Konvertierungsfunktion haben. Das ist, was jQuery macht. Die gesamte Logik, die die jQuery-Module in einer Datei kombiniert, ist in build/tasks/build.js.

Diese Datei definiert eine benutzerdefinierte Konfiguration, an die sie übergibt r.js. Die wichtigen Optionen sind:

  • out die eingestellt ist auf "dist/jquery.js". Dies ist die einzelne Datei, die durch die Optimierung erzeugt wird.

  • wrap.startFile die eingestellt ist auf "src/intro.js". Diese Datei wird vorangestellt an dist/jquery.js.

  • wrap.endFile die eingestellt ist auf "src/outro.js". Diese Datei wird angehängt an dist/jquery.js.

  • onBuildWrite die eingestellt ist auf convert. Das ist ein benutzerdefinierte Funktion.

Die convert-Funktion wird jedes Mal aufgerufen r.js möchte ein Modul in die endgültige Ausgabedatei ausgeben. Die Ausgabe dieser Funktion ist was r.js schreibt in die endgültige Datei. Es macht folgendes:

  • Wenn ein Modul aus der var/ Verzeichnis wird das Modul wie folgt transformiert. Nehmen wir den Fall von
    src/var/toString.js:

    define([
        "./class2type"
        ], function( class2type ) {
        return class2type.toString;
    });
    

    Es wird werden:

    var toString = class2type.toString;
    
  • Ansonsten der define(...) call wird durch den Inhalt des an . übergebenen Callbacks ersetzt define, der endgültige return -Anweisung wird entfernt und alle Zuweisungen zu exports sind abgestreift.

Ich habe Details weggelassen, die sich nicht speziell auf Ihre Frage beziehen.

  • Danke für deine ausführliche Antwort.

    – Sahat Yalkabov

    10. November ’13 um 14:50

  • Ausgezeichnete Antwort. Danke @Louis

    – tuo

    9. Mai ’14 um 8:34

1641780436 698 Der jQuery Quellcode verwendet Requirejs die endgultige Datei jedoch nicht
Iman Mohamadi

Sie können ein Tool namens AMDClean von gfranko verwenden https://www.npmjs.org/package/amdclean
Es ist viel einfacher als das, was jQuery tut, und Sie können es schnell einrichten.

Alles, was Sie tun müssen, ist, ein sehr abstraktes Modul zu erstellen (dasjenige, das Sie dem globalen Geltungsbereich zugänglich machen möchten) und alle Ihre Untermodule darin aufzunehmen.

Eine andere Alternative, die ich in letzter Zeit verwende, ist browserify. Sie können Ihre Module auf NodeJS-Art exportieren/importieren und in jedem Browser verwenden. Sie müssen sie kompilieren, bevor Sie sie verwenden. Es hat auch Schluck und grunzen Plugins zum Einrichten eines Workflows. Für bessere Erklärungen lesen Sie die Dokumentationen auf browserify.org.

.

262110cookie-checkDer jQuery-Quellcode verwendet Require.js, die endgültige Datei jedoch nicht?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy