Come gestire le dipendenze JavaScript lato client? [chiuso]

Sebbene esistano ottime soluzioni per gestire le dipendenze sul lato server, non sono riuscito a trovarne nessuna che soddisfi tutte le mie esigenze di avere un flusso di lavoro coerente per la gestione delle dipendenze JavaScript lato client. Voglio soddisfare questi 5 requisiti:

1. Gestire le mie dipendenze lato client in un formato simile a quella di NPM package.json o Bower s'bower.json
2. Dovrebbe avere la flessibilità di puntare a git repo o file js effettivi (sul web o localmente) nel mio dependency.jsonfile per librerie meno conosciute (npm ti consente di puntare a git repository)
3. Dovrebbe minimizzare e assegnare uno spazio ai nomi a tutte le librerie in un singolo file come ender : è l'unico file js di cui avrei bisogno per inserire il mio <script>tag sul lato client
4. Dovrebbe avere il supporto predefinito per CoffeeScript come BoxJS 4 (ora morto)

5. Nel browser, dovrei essere in grado di utilizzare uno stile richiesto :

   var $ = require('jquery');
   var _ = require('underscore');

   O meglio ancora, fai lo stile headjs :

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });

Se non esiste un unico strumento di questo tipo, qual è la migliore combinazione di strumenti, cioè una catena di strumenti che posso combinare usando qualcosa come volo (o grugnito )?

Ho già ricercato tutti gli strumenti a cui mi sono collegato qui e soddisfano al meglio solo fino a 3 delle mie esigenze individualmente. Quindi, per favore non pubblicare più su questi strumenti. Accetterei solo una risposta che fornisce un unico strumento che soddisfa tutti e 5 i miei requisiti o se qualcuno pubblica un flusso di lavoro / script / esempio di lavoro concreto di una toolchain di più strumenti simili che soddisfa anche tutte le mie esigenze. Grazie.

require.js fa tutto ciò di cui hai bisogno.

La mia risposta a questa domanda potrebbe aiutarti

Esempio:

Gerarchia del progetto dell'app client:

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

main.js è dove inizializzi l'applicazione client e configuri 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
});

Le dipendenze useranno il plugin cs quando preceduto da "cs!". Il plugin cs compila il file coffeescript.

Quando si va in prod, è possibile pre-compilare l'intero progetto con r.js .

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

Ecco le tue esigenze:

• Gestisci le mie dipendenze lato client in un formato simile a package.json di npm o component.json di bower. Diverso ma altrettanto buono!

• Dovrei avere la flessibilità di puntare a git repo o file js effettivi (sul web o localmente) nel mio file dependency.json per librerie meno conosciute (npm ti permette di puntare a git repository). SÌ

• Dovrebbe minimizzare e assegnare uno spazio ai nomi a tutte le librerie in un singolo file come ender: è l'unico file js di cui avrei bisogno per inserire il mio tag di script sul lato client. SÌ con r.js.

• Dovrebbe avere un supporto predefinito per coffeescript come Box. SÌ

• Nel browser posso utilizzare require style o headjs. SÌ

http://requirejs.org/ è quello che stai cercando credo

Come @ Guillaume86 penso che ti porterà il più vicino a dove vuoi essere.

In hem le dipendenze vengono gestite utilizzando una combinazione di npm e hem. Usa npm per installare esplicitamente tutte le dipendenze esterne dei tuoi progetti. Usa orlo per specificare quali dipendenze (sia esterne che locali) dovrebbero essere unite insieme per le tue operazioni lato client.

Ho creato un progetto scheletro di questo in modo che tu possa vedere come funzionerebbe - puoi vederlo su https://github.com/dsummersl/clientsidehem

Aggiunta di dipendenze

Utilizzare npm per cercare una dipendenza specifica e quindi modificare il file package.json per garantire che la dipendenza venga tracciata in futuro. Quindi specifica la dipendenza per la tua applicazione in slug.json.

Ad esempio, supponiamo di voler aggiungere la dipendenza coffee-script. Basta usare npm per installare la dipendenza e salvarla nel file package.json:

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

Supponi di voler includere il tuo modulo "bloomfilters" e non era nel registro di npm. Puoi aggiungerlo al tuo progetto nel modo seguente:

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

Moduli locali

Se vuoi includere il tuo caffè o javascript puoi farlo aggiungendo quei file all'app / cartella. Nota che per esporre il tuo script tramite il metodo "require" devi renderlo un modulo CommonJS. È molto semplice: vedere la documentazione sull'orlo .

File locali

Se desideri includere codice non "CommonJS" non "obbligatorio", puoi anche ricucirlo facendo riferimento al tuo javascript personalizzato o coffeescript tramite l'elenco "libs" in slug.json.

CSS

L'orlo cucirà anche il tuo CSS, se lo desideri. Vedi la documentazione sull'orlo .

Edificio

Una volta che hai elencato le tue dipendenze, puoi usare l'orlo per cucirle tutte insieme.

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

Appunti

Hem era pensato per il progetto spinejs , ma non devi usarlo per quello. Ignora tutti i documenti che menzionano la colonna vertebrale come desideri ...

Bene, sono sorpreso che nessuno abbia ancora menzionato Browserify .

1. supporta il formato package.json
2. usa npm sotto il quale può usare un repository github (o qualsiasi git) come sorgente del pacchetto
3. minimizza e concatena tutte le dipendenze in un unico file.
4. supporta coffeescript se lo includi nelle tue dipendenze
5. richiedono stile fino in fondo.
6. supporta mappe di origine

Sono abbastanza sicuro che Hem soddisfi le tue esigenze (uso un fork personale con compilatori aggiuntivi - jade e stylus - è facile da personalizzare in base alle tue esigenze). Utilizza npm per gestire le dipendenze.

Potresti voler dare un'occhiata a Yeoman , che utilizza diverse tecniche per aiutarti con le tue esigenze.

Il nostro flusso di lavoro è composto da tre strumenti per migliorare la produttività e la soddisfazione durante la creazione di un'app Web: yo (lo strumento di scaffolding), grunt (lo strumento di creazione) e bower (per la gestione dei pacchetti).

Supporto integrato per CoffeeScript, Compass e altro. Funziona con r.js ( RequireJS ), unittesting ecc.

Per quanto riguarda le vostre esigenze:

1. Bower viene utilizzato per la gestione delle dipendenze
2. Bower può lavorare con file locali, git: //, http: // e altro
3. Supporto integrato per la minimizzazione e la concatenazione (anche per le tue immagini)
4. Supporto integrato per compilare automaticamente CoffeeScript e Compass (con LiveReload)
5. Come affermato nel processo di compilazione: se stai usando AMD, passerò quei moduli attraverso r.js in modo che tu non debba farlo.

Tutte le caratteristiche:

Impalcature velocissime: impalcatura semplice di nuovi progetti con modelli personalizzabili (ad esempio HTML5 Boilerplate, Twitter Bootstrap), RequireJS e altro ancora.

Ottimo processo di costruzione : non solo ottieni minificazione e concatenazione; Ottimizzo anche tutti i tuoi file immagine, HTML, compilo i tuoi file CoffeeScript e Compass, se stai usando AMD, passerò quei moduli attraverso r.js così non devi.

Compila automaticamente CoffeeScript e Compass - Il nostro processo di controllo LiveReload compila automaticamente i file sorgente e aggiorna il tuo browser ogni volta che viene apportata una modifica, così non devi farlo tu.

Filtra automaticamente gli script : tutti gli script vengono eseguiti automaticamente su JSHint per garantire che seguano le migliori pratiche linguistiche.

Server di anteprima integrato : non è più necessario avviare il proprio server HTTP. Il mio built-in può essere sparato con un solo comando.

Fantastica ottimizzazione delle immagini: ottimizzo tutte le tue immagini utilizzando OptiPNG e JPEGTran in modo che i tuoi utenti possano dedicare meno tempo al download di risorse e più tempo a utilizzare la tua app.

Gestione dei pacchetti killer : serve una dipendenza? È solo una pressione di un tasto. Ti permetto di cercare facilmente nuovi pacchetti tramite la riga di comando (ad esempio `bower search jquery), installarli e tenerli aggiornati senza bisogno di aprire il browser.

PhantomJS Unit Testing - Esegui facilmente i tuoi unit test in Headless WebKit tramite PhantomJS. Quando crei una nuova applicazione, includo anche alcune impalcature di test per la tua app.

Bower potrebbe adattarsi alle tue esigenze (1) e (2) per il resto che hai richiestojs. Dal 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.

Per installare un pacchetto:

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

Guarda il gestore dei pacchetti Jam . Di seguito è riportata la descrizione dalla sua homepage

Per gli sviluppatori front-end che desiderano risorse gestibili, Jam è un gestore di pacchetti per JavaScript. A differenza di altri repository, mettiamo al primo posto il browser.

Sembra molto simile a npm nel modo in cui funziona.

Installa il pacchetto come di seguito

jam install backbone

mantenere i pacchetti aggiornati eseguendo

jam upgrade
jam upgrade {package} 

Ottimizza i pacchetti per la produzione

jam compile compiled.min.js

Le dipendenze Jam possono essere aggiunte nel package.jsonfile.

Per la documentazione completa leggere la documentazione Jam

Mi sono appena imbattuto in inject.js

Alcune delle funzionalità, dal sito del progetto :

Inject (Apache Software License 2.0) è un modo rivoluzionario per gestire le tue dipendenze in modo indipendente dalla libreria. Alcune delle sue caratteristiche principali includono:

• Conformità CommonJS nel browser (esportazioni. *)
• Visualizza la matrice di supporto CommonJS completa
• Recupero interdominio di file (tramite easyXDM)
• localStorage (carica un modulo una volta)

Ci sono un paio di opzioni:

• http://browserify.org/ che ti permette di importare i moduli
• RequireJS risolve lo stesso problema
• Uno che sembra essere in fase di sviluppo attivo è JoinJS

Anche il componente potrebbe essere interessante, non gestisce le dipendenze di per sé ma consente di utilizzare versioni sminuzzate di librerie altrimenti grandi.

Uso l'orlo con npm e volevo aggiungere alcuni vantaggi aggiuntivi che penso non siano stati coperti finora.

• Hem ha un server web autonomo (strati) in modo da poter sviluppare il codice senza nemmeno doverlo ricompilare. Non lo uso maihem build meno che non pubblichi un'app.
• Non è necessario utilizzare Spine.js per utilizzare hem, è possibile utilizzarlo per compilare pacchetti coffeescript arbitrari se si imposta correttamente slug.json. Ecco uno dei miei pacchetti che viene compilato automaticamente con cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• A proposito di quanto sopra, hem ti consente di collegare altre dipendenze sul tuo sistema locale con npm link e le combina perfettamente anche quando stai usando il server strata. In effetti, non è nemmeno necessario utilizzare il filecake metodo sopra, puoi semplicemente collegarti direttamente a coffeescript da progetti dipendenti.
• Hem supporta eco(incorporato Coffeescript) per le viste e Stylus per CSS e compila tutto questo, insieme al tuo Coffeescript, in un file JS e un file CSS.

Ecco un elenco di base per configurare un'app Spine, hem, coffeescript. Sentiti libero di ignorare le parti della colonna vertebrale. In effetti, a volte utilizzo spine appper impostare una struttura di directory per un'app non Spine, quindi modifico slug.jsonper passare a una struttura di compilazione diversa.

1. Installa NPM: curl http://npmjs.org/install.sh | shsu un sistema * nix. Presumo che sia disponibile dalla riga di comando.
2. Installa orlo globalmente ( npm install -g hem). Lo sviluppo si è ramificato negli ultimi tempi, quindi potresti volerlo scaricare direttamente da github ( https://github.com/spine/hem ), controllare un ramo e npm install -g .in quella cartella.
3. npm install -g spine.app renderà disponibile la colonna vertebrale come comando globale
4. spine app folderfarà un progetto Spine chiamato appin folder, generando la struttura di directory a destra e un gruppo di file scheletro per iniziare.
5. cdnella cartella e modifica dependencies.jsonper le librerie di cui hai bisogno. Aggiungili in slug.jsonmodo che anche l'orlo sappia dove trovarli.
6. Opzionale: npm linkqualsiasi pacchetto locale in fase di sviluppo su node_modules, e puoi aggiungerlo a slug.jsonfor hem (o an index.jsper includerlo direttamente o index.coffeese vuoi che venga compilato da hem).
7. npm install . per scaricare tutte le dipendenze appena inserite.

8. Se dai un'occhiata alla configurazione della colonna vertebrale predefinita, c'è un punto in app/lib/setup.coffeecui hai requiretutte le librerie di cui hai bisogno dalle tue dipendenze. Esempi:

   # 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 index.coffee, devi solo require lib/setupcaricare il controller principale per la tua app. Inoltre, hai bisogno di requirealtre classi in quegli altri controller. È possibile utilizzare spine controller somethingo spine model somethingper generare modelli per controller e modelli. Il tipico controller Spine è simile al seguente, utilizzando il nodo 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. L'impostazione predefinita generata di index.htmlsolito andrà bene per caricare la tua app, ma modificala se necessario. In base alle tue esigenze, estrae solo uno jse un cssfile, che non devi mai modificare.

11. Modificare i file dello stilo come necessario nel file css cartella. È molto più flessibile dei CSS :)
12. Da folder, corri hem serverper avviare un server Hem e vai a localhost:9294per vedere la tua app. (Se hai installato hem globalmente.) Ha alcuni argomenti nascosti, per esempio--host 0.0.0.0 ascolta su tutte le porte.
13. Crea il resto della tua app utilizzando le tecniche MVC appropriate e usa lo stilo per CSS ed eco per le visualizzazioni. Oppure non usare affatto Spine e l'orlo continuerà a funzionare alla grande con Coffeescript e npm. Ci sono molti esempi di progetti che utilizzano entrambi i modelli.

Un'altra cosa: normalmente, hem serversi aggiornerà automaticamente mentre aggiorni il codice e salvi i file, il che rende il debug un gioco da ragazzi. L'esecuzione hem buildcompilerà la tua app in due file application.js, che è minimizzato e application.css. Se esegui hem serverdopo, utilizzerà quei file e non si aggiornerà più automaticamente. Quindi non hem buildfinché non hai effettivamente bisogno di una versione ridotta della tua app per la distribuzione.

Riferimenti aggiuntivi: Spine.js e Hem come iniziare

Ecco una soluzione che adotta un approccio molto diverso: impacchetta tutti i moduli in un oggetto JSON e richiedi i moduli leggendo ed eseguendo il contenuto del file senza richieste aggiuntive.

Implementazione demo pura lato client: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / require dipende dalla disponibilità di un pacchetto JSON in fase di esecuzione. La requirefunzione viene generata per quel pacchetto. Il pacchetto contiene tutti i file che la tua app potrebbe richiedere. Non vengono effettuate ulteriori richieste http perché il pacchetto raggruppa tutte le dipendenze. Questo è il più vicino possibile allo stile Node.js richiesto dal client.

La struttura del pacchetto è la seguente:

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

A differenza di Node, un pacchetto non conosce il suo nome esterno. È compito del pacakge, inclusa la dipendenza, nominarlo. Ciò fornisce un incapsulamento completo.

Date tutte le impostazioni, ecco una funzione che carica un file da un pacchetto:

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

Questo contesto esterno fornisce alcune variabili a cui hanno accesso i moduli.

UN require funzione è esposta ai moduli, quindi potrebbero richiedere altri moduli.

Vengono inoltre esposte proprietà aggiuntive come un riferimento all'oggetto globale e alcuni metadati.

Infine eseguiamo il programma all'interno del modulo e del contesto dato.

Questa risposta sarà molto utile per coloro che desiderano avere uno stile node.js sincrono richiedono un'istruzione nel browser e non sono interessati alle soluzioni di caricamento di script remoto.

Dai un'occhiata a cartero se utilizzi node / express sul backend.

Suggerirei di controllare il toolkit del dojo che sembra soddisfare la maggior parte delle tue esigenze. Quello di cui non sono sicuro è CoffeeScript.

dojo funziona con moduli scritti nel formato AMD (Asynchronous Module Definition). Ha un sistema di compilazione con pacchetti e puoi aggregarli in uno o più file (chiamati livelli). Apparentemente accetta repository di tipo git, maggiori dettagli sul sistema di compilazione qui:

http://dojotoolkit.org/documentation/tutorials/1.8/build/

Per la cronaca, la versione beta v1.9 è prevista per il mese prossimo.

Un altro framework che soddisfa tutti i miei criteri rilasciato di recente: http://duojs.org/ (e supporta anche il trattamento di altre risorse come i CSS come dipendenze).

L'inserimento di dipendenze con caricamento asincrono + browserify sarà un'altra buona scelta, rispetto a requirejs

gestione delle dipendenze del frontend asincrono senza AMD