Obwohl es großartige Lösungen zum Verwalten von Abhängigkeiten auf der Serverseite gibt, konnte ich keine finden, die alle meine Anforderungen an einen kohärenten clientseitigen JavaScript-Workflow für das Abhängigkeitsmanagement erfüllt. Ich möchte diese 5 Anforderungen erfüllen:
- Verwalten Sie meine clientseitigen Abhängigkeiten in einem Format, das dem Paket.json oder bower von npm ähnelt ‚s
bower.json
- Es sollte die Flexibilität haben, auf Git-Repo oder tatsächliche JS-Dateien (entweder im Web oder lokal) in meiner
dependency.json
Datei für weniger bekannte Bibliotheken zu verweisen (mit npm können Sie auf Git-Repos verweisen). - Es sollte alle Bibliotheken wie ender minimieren und in eine einzige Datei umwandeln - das ist die einzige js-Datei, die ich
<script>
auf der Clientseite in mein Tag einfügen müsste - Es sollte eine sofort einsatzbereite Unterstützung für CoffeeScript wie BoxJS 4 bieten (jetzt tot)
Im Browser sollte ich in der Lage sein, einen der beiden erforderlichen Stile zu verwenden:
var $ = require('jquery'); var _ = require('underscore');
Oder noch besser, machen Sie headjs style:
head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) { // executed when all libraries are loaded });
Wenn es kein solches einzelnes Werkzeug gibt, was ist die beste Kombination von Werkzeugen, dh eine Werkzeugkette, die ich mit etwas wie Volo (oder Grunzen) kombinieren kann ) ?
Ich habe bereits alle Tools recherchiert, mit denen ich hier verlinkt habe, und sie erfüllen bestenfalls nur bis zu 3 meiner Anforderungen einzeln. Bitte posten Sie nicht noch einmal über diese Tools. Ich würde nur eine Antwort akzeptieren, die ein einziges Tool enthält, das alle 5 meiner Anforderungen erfüllt, oder wenn jemand einen konkreten Workflow / ein Skript / ein Arbeitsbeispiel für eine Toolchain mit mehreren solchen Tools veröffentlicht, die auch alle meine Anforderungen erfüllt. Danke dir.
quelle
require
Syntax des Knotens an den Browser portiert,Antworten:
require.js macht alles was Sie brauchen.
Meine Antwort darauf Frage kann Ihnen helfen
Beispiel:
Client-App-Projekthierarchie:
In main.js initialisieren Sie Ihre Clientanwendung und konfigurieren require.js:
Abhängigkeiten verwenden das cs Plugin, wenn "cs!" Vorangestellt wird. Das cs-Plugin kompiliert die Coffeescript-Datei.
Wenn Sie in prod gehen, können Sie Ihr gesamtes Projekt mit r.js vorkompilieren .
Hier sind Ihre Anforderungen:
Verwalten Sie meine clientseitigen Abhängigkeiten in einem ähnlichen Format wie package.json von npm oder component.json von bower. Anders aber so gut!
Ich sollte die Flexibilität haben, auf git repo oder tatsächliche js-Dateien (entweder im Web oder lokal) in meiner dependency.json-Datei für weniger bekannte Bibliotheken zu verweisen (npm zeigt auf git repos). JA
Es sollte alle Bibliotheken wie ender minimieren und in eine einzige Datei umwandeln - das ist die einzige js-Datei, die ich auf der Clientseite in mein Skript-Tag einfügen müsste. JA mit r.js.
Es sollte Out-of-Box-Unterstützung für Coffeescript wie Box haben. JA
Im Browser kann ich entweder require style oder headjs verwenden. JA
quelle
r.js
einfach nicht minimierte Versionen aller Bibliotheken abrufen oder wie soll ich mich zwischen minimierten und nicht minimierten Bibliotheken entscheiden?http://requirejs.org/ ist derjenige, den Sie suchen, glaube ich
quelle
Als @ Guillaume86 denke ich, dass Hem Sie am nächsten an den Ort bringen wird, an dem Sie sein möchten.
In Hem werden Abhängigkeiten mit einer Kombination aus npm und Hem verwaltet. Verwenden Sie npm, um alle externen Abhängigkeiten Ihres Projekts explizit zu installieren. Verwenden Sie hem, um anzugeben, welche Abhängigkeiten (sowohl externe als auch lokale) für Ihre clientseitigen Vorgänge zusammengefügt werden sollen.
Ich habe ein Skelettprojekt davon erstellt, damit Sie sehen können, wie dies funktionieren würde - Sie können es unter sehen https://github.com/dsummersl/clientsidehem sehen
Abhängigkeiten hinzufügen
Verwenden Sie npm, um nach einer bestimmten Abhängigkeit zu suchen, und ändern Sie dann die Datei package.json, um sicherzustellen, dass die Abhängigkeit in Zukunft verfolgt wird. Geben Sie dann die Abhängigkeit für Ihre Anwendung in slug.json an.
Angenommen, Sie möchten die Kaffee-Skript-Abhängigkeit hinzufügen. Verwenden Sie einfach npm, um die Abhängigkeit zu installieren und in Ihrer package.json-Datei zu speichern:
Angenommen, Sie möchten Ihr eigenes Modul 'Bloomfilters' einfügen und es war nicht in der npm-Registrierung enthalten. Sie können es folgendermaßen zu Ihrem Projekt hinzufügen:
Lokale Module
Wenn Sie Ihren eigenen Kaffee oder Javascript hinzufügen möchten, können Sie dies tun, indem Sie diese Dateien zur App / zum Ordner hinzufügen. Beachten Sie, dass Sie Ihr Skript zu einem CommonJS-Modul machen müssen, um es über die Methode 'require' verfügbar zu machen. Es ist sehr einfach - siehe die Saumdokumente .
Lokale Dateien
Wenn Sie Nicht-CommonJS-Code einfügen möchten, der nicht "erforderlich" ist, können Sie diesen auch zusammenfügen, indem Sie über die Liste "libs" in slug.json auf Ihr benutzerdefiniertes Javascript oder Coffeescript verweisen.
CSS
Hem wird auch Ihr CSS zusammenfügen, wenn Sie möchten. Siehe die Saumdokumente .
Gebäude
Sobald Sie Ihre Abhängigkeiten aufgelistet haben, können Sie sie mit dem Saum zusammenfügen.
Anmerkungen
Hem war für das Wirbelsäulenprojekt gedacht - aber dafür muss man es nicht verwenden. Ignorieren Sie alle Dokumente, in denen die Wirbelsäule erwähnt wird, wie Sie möchten ...
quelle
Nun, ich bin überrascht, dass noch niemand Browserify erwähnt hat.
quelle
napa
oder nein? npmjs.org/package/napaIch bin mir ziemlich sicher, dass Hem Ihre Anforderungen erfüllt (ich verwende eine persönliche Gabel mit zusätzlichen Compilern - Jade und Stift - es ist einfach, sie an Ihre Bedürfnisse anzupassen). Es verwendet npm, um Abhängigkeiten zu verwalten.
quelle
Vielleicht möchten Sie einen Blick auf Yeoman werfen , das verschiedene Techniken verwendet, um Ihnen bei Ihren Anforderungen zu helfen.
Integrierte Unterstützung für CoffeeScript, Compass und mehr. Funktioniert mit r.js ( RequireJS ), unittesting etc.
Wie für Ihre Anforderungen:
Alle Features:
quelle
Bower kann Ihren Bedürfnissen (1) und (2) für den Rest entsprechen, den Sie benötigen. Aus der Readme:
So installieren Sie ein Paket:
quelle
Schauen Sie sich den Jam-Paketmanager an . Es folgt die Beschreibung von seiner Homepage
Es scheint npm sehr ähnlich zu sein, wie es funktioniert.
Installieren Sie das Paket wie unten
Halten Sie Pakete durch Ausführen auf dem neuesten Stand
Pakete für die Produktion optimieren
Jam-Abhängigkeiten können hinzugefügt werden
package.json
Datei werden.Eine vollständige Dokumentation finden Sie unter Jam-Dokumentation
quelle
Ich bin gerade auf inject.js gestoßen
Einige der Funktionen von der Projektseite :
quelle
Es gibt mehrere Möglichkeiten:
Die Komponente könnte auch von Interesse sein. Sie verwaltet keine Abhängigkeiten per se, ermöglicht jedoch die Verwendung zerhackter Versionen ansonsten großer Bibliotheken.
quelle
Ich benutze Saum mit npm und wollte einige zusätzliche Vorteile hinzufügen, die meiner Meinung nach bisher nicht abgedeckt wurden.
hem build
wenn ich eine App veröffentliche.cake
oben beschriebene Methode verwenden, sondern können einfach direkt von abhängigen Projekten auf Coffeescript verlinken.eco
(eingebettetes Coffeescript) für Ansichten und Stylus für CSS und kompiliert all dies zusammen mit Ihrem Coffeescript in einer JS- und einer CSS-Datei.Hier ist eine grundlegende Liste für die Einrichtung einer App für Wirbelsäule, Saum und Kaffeeskript. Fühlen Sie sich frei, die Wirbelsäulenteile zu ignorieren. Tatsächlich richte ich manchmal
spine app
eine Verzeichnisstruktur für eine Nicht-Spine-App ein und bearbeiteslug.json
sie dann, um zu einer anderen Kompilierungsstruktur zu wechseln.curl http://npmjs.org/install.sh | sh
auf einem * nix-System. Ich gehe davon aus, dass es über die Befehlszeile verfügbar ist.npm install -g hem
). Die Entwicklung hat sich in letzter Zeit verzweigt, daher möchten Sie sie möglicherweise direkt aus Github ( https://github.com/spine/hem ) herausholen , einen Zweig auschecken undnpm install -g .
in diesem Ordner.npm install -g spine.app
wird die Wirbelsäule als globalen Befehl verfügbar machenspine app folder
genannt wird ein Spine Projekt machenapp
infolder
die richtige Verzeichnisstruktur und eine Reihe von Skelett - Dateien zu erzeugen , um loszulegen.cd
Ordner und bearbeitendependencies.json
für die Bibliotheken, die Sie benötigen. Fügen Sie sie hinzu,slug.json
damit der Saum weiß, wo sie auch zu finden sind.npm link
Jedes Ihrer lokalen Pakete, die sich in der Entwicklung befindennode_modules
, und Sie können sieslug.json
für hem hinzufügen (entwederindex.js
direkt einschließen oderindex.coffee
wenn hem dies kompilieren soll.)npm install .
um alle Abhängigkeiten herunterzuladen, die Sie gerade eingegeben haben.Wenn Sie sich die Standard-Wirbelsäulenkonfiguration ansehen, gibt es eine
app/lib/setup.coffee
Sie dortrequire
alle Bibliotheken, die Sie aus Ihren Abhängigkeiten benötigen. Beispiele:In und laden
index.coffee
Sie einfachrequire lib/setup
den Hauptcontroller für Ihre App. Darüber hinaus benötigen Sierequire
andere Klassen in diesen anderen Controllern. Sie könnenspine controller something
oder verwendenspine model something
Vorlagen für Controller und Modelle generieren. Ein typischer Wirbelsäulen-Controller sieht unter Verwendung der Knoten wie folgt ausrequire
:Der generierte Standard
index.html
ist normalerweise zum Laden Ihrer App in Ordnung, kann jedoch nach Bedarf geändert werden. Gemäß Ihren Anforderungen werden nur einejs
und einecss
Datei abgerufen, die Sie nie ändern müssen.css
Ordner. Es ist viel flexibler als CSS :)folder
, laufhem server
Starten Sie um einen Hem-Server zu starten, und navigieren Sie zulocalhost:9294
, um Ihre App anzuzeigen. (Wenn Sie hem global installiert haben.) Es gibt zum Beispiel einige versteckte Argumente--host 0.0.0.0
Abhören aller Ports.Eine weitere Sache: Normalerweise
hem server
wird automatisch aktualisiert, wenn Sie Ihren Code aktualisieren und Dateien speichern, was das Debuggen zum Kinderspiel macht. Durch Ausführenhem build
wird Ihre App in zwei Dateien kompiliertapplication.js
, die minimiert sind undapplication.css
. Wenn du läufsthem server
, werden diese Dateien verwendet und nicht mehr automatisch aktualisiert. Also nichthem build
wenn Sie tatsächlich eine minimierte Version Ihrer App für die Bereitstellung benötigen.Zusätzliche Referenzen: Spine.js & hem beginnen
quelle
Hier ist eine Lösung, die einen ganz anderen Ansatz verfolgt: Packen Sie alle Module in ein JSON-Objekt und benötigen Sie Module, indem Sie den Dateiinhalt ohne zusätzliche Anforderungen lesen und ausführen.
Reine clientseitige Demo-Implementierung: http://strd6.github.io/editor/
https://github.com/STRd6/require/blob/master/main.coffee.md
STRd6 / require hängt davon ab, ob zur Laufzeit ein JSON-Paket verfügbar ist. Die
require
Funktion wird für dieses Paket generiert. Das Paket enthält alle Dateien, die Ihre App möglicherweise benötigt. Es werden keine weiteren http-Anforderungen gestellt, da das Paket alle Abhängigkeiten bündelt. Dies ist so nah wie möglich an dem Node.js-Stil, den der Client benötigt.Die Struktur des Pakets ist wie folgt:
Im Gegensatz zu Node kennt ein Paket seinen externen Namen nicht. Es ist Sache des Pakets, einschließlich der Abhängigkeit, es zu benennen. Dies bietet eine vollständige Kapselung.
Angesichts all dieser Einstellungen ist hier eine Funktion, die eine Datei aus einem Paket lädt:
Dieser externe Kontext bietet eine Variable, auf die Module Zugriff haben.
Eine
require
Funktion ist Modulen ausgesetzt, sodass sie möglicherweise andere Module benötigen.Zusätzliche Eigenschaften wie ein Verweis auf das globale Objekt und einige Metadaten werden ebenfalls angezeigt.
Schließlich führen wir das Programm innerhalb des Moduls aus und geben den Kontext an.
Diese Antwort ist besonders hilfreich für diejenigen, die einen synchronen node.js-Stil benötigen, der eine Anweisung im Browser erfordert und nicht an Lösungen zum Laden von Remote-Skripten interessiert ist.
quelle
Schauen Sie sich Cartero an, wenn Sie Node / Express im Backend verwenden.
quelle
Ich würde vorschlagen, das Dojo-Toolkit zu lesen lesen, das die meisten Ihrer Anforderungen zu erfüllen scheint. Das, bei dem ich mir nicht sicher bin, ist CoffeeScript.
dojo arbeitet mit Modulen, die im AMD-Format (Asynchronous Module Definition) geschrieben sind. Es verfügt über ein Build-System mit Paketen, die Sie in einer oder mehreren Dateien (so genannten Layern) zusammenfassen können. Anscheinend akzeptiert es Repositorys vom Typ Git. Weitere Details zum Build-System finden Sie hier:
http://dojotoolkit.org/documentation/tutorials/1.8/build/
Für den Rekord wird v1.9 Beta nächsten Monat erwartet.
quelle
Ein weiteres Framework, das alle meine kürzlich veröffentlichten Kriterien erfüllt: http://duojs.org/ (und auch die Behandlung anderer Ressourcen wie CSS als Abhängigkeiten unterstützt).
quelle
Abhängigkeitsinjektion mit asynchronem Laden + browserify ist eine weitere gute Wahl im Vergleich zu requirejs
asynchrones Frontend-Abhängigkeitsmanagement ohne AMD
quelle