Wie kann ich heute eine clientseitige Javascript-Bibliothek modularisieren und verpacken?

Ich habe mich mit dem modernen clientseitigen JS-Ökosystem vertraut gemacht und mich über CommonJS und AMD informiert (einschließlich der zugehörigen Tools - browserify, requirejs, onejs, jam, Dutzende anderer). Wenn ich eine Javascript-Bibliothek schreibe, wie kann ich sie so modularisieren / verpacken, dass sie am breitesten zugänglich ist (idealerweise für Benutzer, die auf CommonJS, AMD und insbesondere keine schwören)?

Beliebte Bibliotheken wie jQuery scheinen nur die Verkettung von Dateien der alten Schule zu verwenden, um sich selbst zu erstellen und dynamisch zu erkennen, ob sie in einen exportsoder den globalen Kontext schreiben sollen . Ich mache derzeit das Gleiche, aber der Hauptnachteil ist, dass es schön ist, wenn ich (im Gegensatz zu jQuery) von einigen Bibliotheken abhängig bin, Benutzer nicht bitten zu müssen, den Transitivsatz manuell vorab einzuschließen. (Obwohl ich derzeit nur zwei Abhängigkeiten habe.) Und natürlich die globale Verschmutzung von Namespaces.

Oder ist es am saubersten, für jeden Kontext mehrere Versionen meiner Bibliothek zu generieren?

Ich wundere mich auch über Verpackung und Veröffentlichung. Es gibt mehrere Systeme, aber ich glaube, das wichtigste ist die Laube, die leicht zu handhaben ist, da sie nur abgerufen wird. Ich frage mich jedoch, ob ich auch auf andere Paketsysteme wie Komponenten abzielen sollte (für die CommonJS erforderlich ist).

Gibt es andere relevante Aspekte, die ich beachten sollte? Gibt es dafür gute Beispielprojekte?

Ich habe immer Build-Dateien verwendet, aber seit ich mein erstes nodejs-Projekt gestartet habe, habe ich browserify verwendet . Mit browerify und anderen ähnlichen Bibliotheken ist Ihr Code Ihre Build-Datei. Ich nutze eine Client- und Server-Bibliothek, die auf beiden ausgeführt werden kann, aber auch mit reinem Client-Code funktioniert. Zusammenfassend bietet browserify alle Vorteile des Schreibens von Code in Node (keine Anon-Funktionen zur Vermeidung von Globals, npm, einfach erforderlich) und ermöglicht es Ihnen, diesen Code so zu verpacken, dass er mit einem Befehl auf dem Client ausgeführt wird und nur eine Datei lädt.

Mit browserify können Sie Folgendes tun (app.js genannt):

var MyLib = require('../myLib');

if(typeof window !== 'undefined') {
    window.MyLib = MyLib;
    window._ = require('underscore');
    window.$ = require('$');
    window.MyLib.myCan = require('./3rdParty/can/can');
}

browserify app.js> client.js

Würde so etwas produzieren wie:

[function(require,module,exports){
    window.MyLib = //MyLib code
},
function(require,module,exports){
     window._ = //_ code
},
function(require,module,exports){
    window.$ = //$ code
},
function(require,module,exports){
    window.MyLib.myCan = //can code
}

Die Datei, die Sie definieren würden, könnte alle Bibliotheken von Drittanbietern enthalten und nicht mit Ihren Entwicklern kollidieren, die sie verwenden.

- Bearbeiten Sie die Antwort auf den Kommentar (und einen vollständigen Fehler in der Frage)

Ich denke, das hängt von Ihren Abhängigkeiten ab und davon, wie viel Zeit Sie verbringen möchten, um sicherzustellen, dass sie in allen Versionen und Bibliotheken funktionieren. Wenn Ihre Abhängigkeiten häufig sind und von Version zu Version der gleichen API folgen, können Sie den Backbone-Weg gehen und nur verlangen, dass der Benutzer $ und _ hat. Ich würde vorschlagen, die dunkeleren Bibliotheken als Teil der gebündelten Datei zu platzieren. Die Optionen müssen auch nicht geschnitten und getrocknet werden. Sie können ein vorgefertigtes oder ein eigenes Paket anbieten.

Arten von clientseitigen Bibliotheken:

1. Berührt DOM
2. Berührt DOM nicht

Bei der ersten Art (UI-Widgets usw.) wird normalerweise davon ausgegangen, dass jQuery vorhanden ist. Sie können auch "DOM library agnostic" schreiben und es auch mit den weniger populären arbeiten lassen, aber ich kümmere mich nicht darum.

Mit der zweiten Art. Machen Sie es zunächst nicht zu einem jQuery-Plugin, zum Beispiel ist "jQuery-Cookie-Plugin" lächerlich, aber eine solche Bibliothek existiert tatsächlich.

Beide Arten haben möglicherweise keine Abhängigkeiten, kleine Abhängigkeiten oder große Abhängigkeiten - wobei eine Dom-Bibliothek in diesem Sinne nicht als Abhängigkeit gilt. Mit den ersten 2 verketten Sie sie einfach in Ihrem Bibliotheksbereich und sorgen sich nicht um mögliche Duplikate. Zum Beispiel verkettet jQuery eine interne isArrayLikeFunktion, obwohl der Benutzer möglicherweise bereits eine eigene Funktion aus einer zufälligen Utility-Belt-Bibliothek hat.

Ich habe nur eine persönliche Erfahrung mit einer großen Abhängigkeit bei der Entwicklung einer Bibliothek (eigentlich einer Sprache) - moment.js. In diesem Fall würde ich 2 Builds bereitstellen, einen mit verketteter moment.js und einen ohne, bei denen der Benutzer für die Aufnahme verantwortlich ist. Ich weiß allerdings nicht, ob dies eine gute Lösung ist.

Und ja, in jedem Fall wird der jQuery-Ansatz gewählt, eine letzte große Datei zu erstellen, die einfach funktioniert. Es hat die Modul-Boilerplate unten (erfordert / AMD / global etc Erkennung).