Wie verwalte ich clientseitige JavaScript-Abhängigkeiten? [geschlossen]

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:

1. Verwalten Sie meine clientseitigen Abhängigkeiten in einem Format, das dem Paket.json oder bower von npm ähnelt ‚sbower.json
2. Es sollte die Flexibilität haben, auf Git-Repo oder tatsächliche JS-Dateien (entweder im Web oder lokal) in meiner dependency.jsonDatei für weniger bekannte Bibliotheken zu verweisen (mit npm können Sie auf Git-Repos verweisen).
3. 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
4. Es sollte eine sofort einsatzbereite Unterstützung für CoffeeScript wie BoxJS 4 bieten (jetzt tot)

5. 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.

require.js macht alles was Sie brauchen.

Meine Antwort darauf Frage kann Ihnen helfen

Beispiel:

Client-App-Projekthierarchie:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

In main.js initialisieren Sie Ihre Clientanwendung und konfigurieren require.js:

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

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 .

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

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

http://requirejs.org/ ist derjenige, den Sie suchen, glaube ich

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:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

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:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

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.

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

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 ...

Nun, ich bin überrascht, dass noch niemand Browserify erwähnt hat.

1. unterstützt das package.json-Format
2. verwendet npm darunter, wodurch ein Github-Repo (oder ein beliebiges Git-Repo) als Paketquelle verwendet werden kann
3. minimiert und verkettet alle Abhängigkeiten in einer einzigen Datei.
4. unterstützt Coffeescript, wenn Sie es in Ihre Abhängigkeiten aufnehmen
5. erfordern Stil den ganzen Weg.
6. unterstützt Quellkarten

Ich 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.

Vielleicht möchten Sie einen Blick auf Yeoman werfen , das verschiedene Techniken verwendet, um Ihnen bei Ihren Anforderungen zu helfen.

Unser Workflow besteht aus drei Tools zur Verbesserung Ihrer Produktivität und Zufriedenheit beim Erstellen einer Web-App: yo (das Gerüst-Tool), grunzen (das Build-Tool) und bower (für die Paketverwaltung).

Integrierte Unterstützung für CoffeeScript, Compass und mehr. Funktioniert mit r.js ( RequireJS ), unittesting etc.

Wie für Ihre Anforderungen:

1. Bower wird für das Abhängigkeitsmanagement verwendet
2. Bower kann mit lokalen Dateien, git: //, http: // und mehr arbeiten
3. Integrierte Unterstützung für Minimierung und Verkettung (auch für Ihre Bilder)
4. Integrierte Unterstützung zum automatischen Kompilieren von CoffeeScript & Compass (mit LiveReload)
5. Wie im Erstellungsprozess angegeben: Wenn Sie AMD verwenden, werde ich diese Module über r.js übergeben, damit Sie dies nicht tun müssen.

Alle Features:

Blitzschnelles Gerüst - Einfache Erstellung neuer Projekte mit anpassbaren Vorlagen (z. B. HTML5 Boilerplate, Twitter Bootstrap), RequireJS und mehr.

Großartiger Build-Prozess - Sie erhalten nicht nur Minimierung und Verkettung. Ich optimiere auch alle Ihre Bilddateien, HTML, kompiliere Ihre CoffeeScript- und Compass-Dateien. Wenn Sie AMD verwenden, werde ich diese Module durch r.js weiterleiten, damit Sie nicht müssen.

Kompilieren Sie CoffeeScript & Compass automatischKaffeeScript automatisch kompilieren - Unser LiveReload-Überwachungsprozess kompiliert automatisch Quelldateien und aktualisiert Ihren Browser, wenn Änderungen vorgenommen werden, damit Sie dies nicht tun müssen.

Fusseln Sie Ihre Skripte automatisch - Alle Ihre Skripte werden automatisch gegen JSHint ausgeführt, um sicherzustellen, dass sie den Best Practices der Sprache entsprechen.

Eingebauter Vorschau-Server - Sie müssen Ihren eigenen HTTP-Server nicht mehr starten. Mein eingebauter kann mit nur einem Befehl ausgelöst werden.

Fantastische Bildoptimierung - ich optimieren alle Ihre Bilder mit OptiPNG und jpegtran , damit die Benutzer weniger Zeit das Herunterladen Vermögen ausgeben können und mehr Zeit , um Ihre App.

Killer-Paketverwaltung - Benötigen Sie eine Abhängigkeit? Es ist nur einen Tastendruck entfernt. Ich erlaube Ihnen, einfach über die Befehlszeile nach neuen Paketen zu suchen (z. B. `bower search jquery), sie zu installieren und auf dem neuesten Stand zu halten, ohne Ihren Browser öffnen zu müssen.

PhantomJS-Komponententests - Führen Sie Ihre Komponententests ganz einfach in Headless WebKit über PhantomJS aus. Wenn Sie eine neue Anwendung erstellen, füge ich auch einige Testgerüste für Ihre App hinzu.

Bower kann Ihren Bedürfnissen (1) und (2) für den Rest entsprechen, den Sie benötigen. Aus der Readme:

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

So installieren Sie ein Paket:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

Schauen Sie sich den Jam-Paketmanager an . Es folgt die Beschreibung von seiner Homepage

Für Front-End-Entwickler, die sich nach wartbaren Assets sehnen, ist Jam ein Paketmanager für JavaScript. Im Gegensatz zu anderen Repositorys steht der Browser an erster Stelle.

Es scheint npm sehr ähnlich zu sein, wie es funktioniert.

Installieren Sie das Paket wie unten

jam install backbone

Halten Sie Pakete durch Ausführen auf dem neuesten Stand

jam upgrade
jam upgrade {package} 

Pakete für die Produktion optimieren

jam compile compiled.min.js

Jam-Abhängigkeiten können hinzugefügt werden package.json Datei werden.

Eine vollständige Dokumentation finden Sie unter Jam-Dokumentation

Ich bin gerade auf inject.js gestoßen

Einige der Funktionen von der Projektseite :

Inject (Apache Software License 2.0) ist eine revolutionäre Methode, um Ihre Abhängigkeiten bibliotheksunabhängig zu verwalten. Einige seiner Hauptmerkmale umfassen:

• CommonJS-Konformität im Browser (Exporte. *)
• Zeigen Sie die vollständige CommonJS-Support-Matrix an
• Domänenübergreifendes Abrufen von Dateien (über easyXDM)
• localStorage (Modul einmal laden)

Es gibt mehrere Möglichkeiten:

• http://browserify.org/ , mit dem Sie Module importieren können
• RequireJS behebt das gleiche Problem
• Eine, die sich in der aktiven Entwicklung zu befinden scheint, ist JoinJS

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.

Ich benutze Saum mit npm und wollte einige zusätzliche Vorteile hinzufügen, die meiner Meinung nach bisher nicht abgedeckt wurden.

• Hem verfügt über einen eigenständigen Webserver (Strata), sodass Sie Ihren Code entwickeln können, ohne ihn neu kompilieren zu müssen. Ich benutze niehem build wenn ich eine App veröffentliche.
• Sie müssen Spine.js nicht verwenden, um hem zu verwenden. Sie können damit beliebige Coffeescript-Pakete kompilieren, wenn Sie slug.json korrekt eingerichtet haben. Hier ist eines meiner Pakete, das automatisch mit Cakefile kompiliert wird: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Apropos, mit hem können Sie andere Abhängigkeiten Ihres lokalen Systems mit npm link verknüpfen und diese nahtlos kombinieren, selbst wenn Sie den Schichtenserver verwenden. Tatsächlich müssen Sie nicht einmal die cakeoben beschriebene Methode verwenden, sondern können einfach direkt von abhängigen Projekten auf Coffeescript verlinken.
• Hem unterstützt 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 appeine Verzeichnisstruktur für eine Nicht-Spine-App ein und bearbeite slug.jsonsie dann, um zu einer anderen Kompilierungsstruktur zu wechseln.

1. Installieren Sie NPM: curl http://npmjs.org/install.sh | shauf einem * nix-System. Ich gehe davon aus, dass es über die Befehlszeile verfügbar ist.
2. Installieren Sie den Saum global ( 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 und npm install -g .in diesem Ordner.
3. npm install -g spine.app wird die Wirbelsäule als globalen Befehl verfügbar machen
4. spine app foldergenannt wird ein Spine Projekt machen appin folderdie richtige Verzeichnisstruktur und eine Reihe von Skelett - Dateien zu erzeugen , um loszulegen.
5. cdOrdner und bearbeiten dependencies.jsonfür die Bibliotheken, die Sie benötigen. Fügen Sie sie hinzu, slug.jsondamit der Saum weiß, wo sie auch zu finden sind.
6. Optional: npm link Jedes Ihrer lokalen Pakete, die sich in der Entwicklung befinden node_modules, und Sie können sie slug.jsonfür hem hinzufügen (entweder index.jsdirekt einschließen oder index.coffeewenn hem dies kompilieren soll.)
7. npm install . um alle Abhängigkeiten herunterzuladen, die Sie gerade eingegeben haben.

8. Wenn Sie sich die Standard-Wirbelsäulenkonfiguration ansehen, gibt es eine app/lib/setup.coffee Sie dort requirealle Bibliotheken, die Sie aus Ihren Abhängigkeiten benötigen. Beispiele:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'

9. In und laden index.coffeeSie einfach require lib/setupden Hauptcontroller für Ihre App. Darüber hinaus benötigen Sie requireandere Klassen in diesen anderen Controllern. Sie können spine controller somethingoder verwendenspine model something Vorlagen für Controller und Modelle generieren. Ein typischer Wirbelsäulen-Controller sieht unter Verwendung der Knoten wie folgt aus require:

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header

10. 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 eine jsund eine cssDatei abgerufen, die Sie nie ändern müssen.

11. Bearbeiten Sie Ihre Stiftdateien nach Bedarf im cssOrdner. Es ist viel flexibler als CSS :)
12. Von folder, laufhem serverStarten Sie um einen Hem-Server zu starten, und navigieren Sie zu localhost: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.
13. Erstellen Sie den Rest Ihrer App mit den richtigen MVC-Techniken und verwenden Sie Stylus für CSS und Eco für Ansichten. Oder verwenden Sie Spine überhaupt nicht, und der Saum funktioniert immer noch hervorragend mit Coffeescript und npm. Es gibt viele Beispiele für Projekte, die beide Modelle verwenden.

Eine weitere Sache: Normalerweise hem serverwird automatisch aktualisiert, wenn Sie Ihren Code aktualisieren und Dateien speichern, was das Debuggen zum Kinderspiel macht. Durch Ausführen hem buildwird Ihre App in zwei Dateien kompiliert application.js, die minimiert sind und application.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

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 requireFunktion 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:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

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:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

Dieser externe Kontext bietet eine Variable, auf die Module Zugriff haben.

Eine requireFunktion 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.

Schauen Sie sich Cartero an, wenn Sie Node / Express im Backend verwenden.

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.

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).

Abhängigkeitsinjektion mit asynchronem Laden + browserify ist eine weitere gute Wahl im Vergleich zu requirejs

asynchrones Frontend-Abhängigkeitsmanagement ohne AMD