Come gestire le dipendenze JavaScript lato client?

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

  1. Gestisci le mie dipendenze lato client in un formato simile a package.json di npm o bower.json
  2. Dovrebbe avere la flessibilità di puntare a git repo o ai file js effettivi (sul web o localmente) nel mio file dependency.json per librerie meno conosciute (npm ti permette di puntare a repository git)
  3. Dovrebbe ridimensionare e namespace tutte le librerie in un singolo file come ender – questo è l’unico file js che avrei bisogno di inserire nel mio tag sul lato client
  4. Dovrebbe avere supporto fuori dalla scatola per CoffeeScript come BoxJS 4 (ora morto)
  5. Nel browser, dovrei essere in grado di utilizzare uno stile che richiede :

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

    O meglio ancora, fai stile headjs :

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

Se non esiste nessuno di questi strumenti, qual è la migliore combinazione di strumenti, ad esempio una catena di strumenti che posso combinare usando qualcosa come volo (o grunt )?

Ho già studiato tutti gli strumenti a cui ho collegato qui e soddisfano solo fino a 3 dei miei requisiti al meglio individualmente. Quindi, per favore non postare di nuovo su questi strumenti. Accetterei solo una risposta che fornisca un unico strumento che soddisfi tutti i 5 requisiti o se qualcuno pubblichi un stream di lavoro concreto / script / esempio operativo di una toolchain di più di tali strumenti che soddisfi anche tutte le mie esigenze. Grazie.

require.js fa tutto il necessario.

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 si inizializza l’applicazione client e si configura 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 una volta anteposto da “cs!”. Il plugin cs compila il file coffeescript.

Quando vai su prod, puoi pre-compilare il tuo intero progetto con r.js.

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

Ecco i tuoi requisiti:

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

  • Dovrei avere la flessibilità di puntare a git repo o ai file js effettivi (sul web o localmente) nel mio file dependency.json per librerie meno conosciute (npm puntiamo a git repos).

  • Dovrebbe ridimensionare e namespace tutte le librerie in un singolo file come ender – questo è l’unico file js che avrei bisogno di inserire nel mio script-tag sul lato client. con r.js.

  • Dovrebbe avere supporto fuori dalla scatola per coffeescript come Box.

  • Nel browser posso usare o richiedere uno stile o un headjs.

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

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

Le dipendenze nell’orlo sono gestite usando una combinazione di npm e orlo. Usa npm per installare esplicitamente tutte le dipendenze esterne dei tuoi progetti. Usa orlo per specificare quali dipendenze (esterne e locali) devono essere cucite insieme per le operazioni lato client.

Ho creato un progetto scheletro di questo in modo da poter vedere come funzionerebbe – puoi vederlo su https://github.com/dsummersl/clientsidehem

Aggiungere 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 specificare la dipendenza per l’applicazione in slug.json.

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

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

Supponiamo che tu voglia includere i “bloomfilters” del tuo modulo e che non fosse 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 si desidera includere il proprio caffè o javascript, è ansible farlo aggiungendo tali file all’app / cartella. Nota che per esporre lo script tramite il metodo ‘require’ devi renderlo un modulo CommonJS. È molto semplice – vedi i documenti di bordo .

File locali

Se vuoi includere codice non-CommonJS non ‘require’ puoi anche farlo collegando il tuo javascript personalizzato o coffeescript tramite l’elenco ‘libs’ in slug.json.

CSS

Anche Hem cucirà insieme il tuo CSS, se vuoi. Vedi i documenti di orlo .

Costruzione

Dopo aver elencato le 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 

Gli appunti

Hem era pensato per il progetto spinejs – ma non devi usarlo per questo. Ignora qualsiasi documento che menzioni la spina dorsale come desideri …

Beh, sono sorpreso che nessuno abbia ancora menzionato Browserify .

  1. supporta il formato package.json
  2. usa npm sotto il quale puoi usare un repository github (o qualsiasi git) come sorgente di pacchetti
  3. minimizza e concatena tutte le dipendenze in un singolo file.
  4. supporta coffeescript se lo si include nelle dipendenze
  5. richiede stile fino in fondo.
  6. supporta mappe sorgente

Sono abbastanza sicuro che Hem soddisfi le tue esigenze (utilizzo un fork personale con compilatori aggiuntivi – giada e stilo – è facile personalizzarlo in base alle tue esigenze). Usa npm per gestire le dipendenze.

Potresti dare un’occhiata a Yeoman , che usa diverse tecniche per aiutarti con le tue esigenze.

Il nostro stream di lavoro comprende 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 incorporato per CoffeeScript, Compass e altro. Funziona con r.js ( RequireJS ), unittesting ecc.

Per quanto riguarda le tue esigenze:

  1. Bower viene utilizzato per la gestione delle dipendenze
  2. Bower può lavorare con i file locali, git: //, http: // e altro
  3. Supporto integrato per la minimizzazione e la concatenazione (anche per le tue immagini)
  4. Supporto incorporato per compilare automaticamente CoffeeScript & Compass (con LiveReload)
  5. Come indicato nel processo di compilazione: se utilizzi AMD, passerò quei moduli attraverso r.js in modo da non doverlo fare.

Tutte le caratteristiche:

Impalcature fulminee: impreziosite facilmente nuovi progetti con modelli personalizzabili (es. HTML5 Boilerplate, Twitter Bootstrap), RequireJS e altro.

Ottimo processo di costruzione – Non solo ottieni minificazioni e concatenazioni; Inoltre ottimizzo tutti i file immagine, HTML, compila i tuoi file CoffeeScript e Compass, se usi AMD, passerò quei moduli attraverso r.js in modo da non doverlo fare.

Compilazione automatica di CoffeeScript & Compass : il nostro processo di visualizzazione LiveReload compila automaticamente i file sorgente e aggiorna il browser ogni volta che viene apportata una modifica, in modo da non doverlo fare.

Filtraggio automatico degli script : tutti gli script vengono eseguiti automaticamente contro JSHint per garantire che seguano le best practice del linguaggio.

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

Impressionante ottimizzazione delle immagini: ottimizzo tutte le tue immagini utilizzando OptiPNG e JPEGTran in modo che gli utenti possano dedicare meno tempo a scaricare risorse e più tempo a utilizzare la tua app.

Gestione dei pacchetti Killer – Hai bisogno di una dipendenza? È solo una sequenza di tasti. Ti permetto di cercare facilmente nuovi pacchetti tramite la riga di comando (ad esempio `bower search jquery), installarli e tenerli aggiornati senza dover aprire il browser.

Test dell’unità PhantomJSEsegui facilmente i tuoi test unitari in WebKit senza testa tramite PhantomJS. Quando crei una nuova applicazione, includo anche alcuni scaffold di test per la tua app.

Bower può soddisfare le tue esigenze (1) e (2) per il resto che hai requirejs. 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 di Jam . Di seguito è la descrizione dalla sua homepage

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

Sembra molto simile a npm nel modo in cui funziona.

Installa pacchetto come di seguito

 jam install backbone 

mantenere aggiornati i pacchetti eseguendo

 jam upgrade jam upgrade {package} 

Ottimizza i pacchetti per la produzione

 jam compile compiled.min.js 

Le dipendenze di Jam possono essere aggiunte nel file package.json .

Per la documentazione completa, leggere la documentazione di Jam

Ho appena trovato inject.js

Alcune delle funzionalità, dal sito del progetto :

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

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

Ci sono un paio di opzioni:

  • http://browserify.org/ che consente di importare moduli
  • RequireJS affronta lo stesso problema
  • Uno che sembra essere in sviluppo attivo è JoinJS

Il componente potrebbe anche essere di interesse, non gestisce le dipendenze di per sé ma consente di utilizzare versioni tagliate di librerie altrimenti grandi.

Uso orlo con npm e volevo aggiungere alcuni ulteriori vantaggi che, a mio avviso, non erano stati trattati finora.

  • Hem ha un server web autonomo (strati) in modo che tu possa sviluppare il tuo codice senza nemmeno doverlo ricompilare. Non uso mai la hem build meno che non stia pubblicando un’app.
  • Non è necessario utilizzare Spine.js per utilizzare orlo, puoi usarlo per compilare pacchetti arbitrari di coffeescript se hai impostato correttamente slug.json. Ecco uno dei miei pacchetti che è auto-compilato con cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
  • Parlando di quanto sopra, orlo ti permette di colbind altre dipendenze sul tuo sistema locale con il link npm e le combina perfettamente anche quando usi il server degli strati. In realtà, non è necessario nemmeno usare il metodo della cake sopra, basta collegarsi direttamente al coffeescript da progetti dipendenti.
  • Hem supporta eco (Coffeescript incorporato) per le viste e Stylus per CSS e compila tutto ciò, insieme al Coffeescript, in un file JS e un file CSS.

Ecco un elenco di base per l’impostazione con un’app per la dermatite, l’orlo e il coffeescript. Sentiti libero di ignorare le parti della Spina. In effetti, a volte uso l’ spine app per impostare una struttura di directory per un’app non Spine, quindi modificare slug.json per passare a una diversa struttura di compilazione.

  1. Installa NPM: curl http://npmjs.org/install.sh | sh curl http://npmjs.org/install.sh | sh su un sistema * nix. Presumo che sia disponibile dalla riga di comando.
  2. Installa l’orlo globalmente ( npm install -g hem ). Lo sviluppo si è ramificato tardi, quindi potresti voler uscire direttamente da github ( https://github.com/spine/hem ), npm install -g . checkout di 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 folder renderà un progetto Spine chiamato app in folder , generando la giusta struttura di directory e un mucchio di file skeleton per iniziare.
  5. cd to folder e modifica dependencies.json per le librerie di cui hai bisogno. Aggiungili a slug.json modo che sappia dove trovarli.
  6. Opzionale: npm link tutti i tuoi pacchetti locali in fase di sviluppo a node_modules e puoi aggiungerli a slug.json per hem (o index.js da includere direttamente o index.coffee se vuoi che hem lo compili).
  7. npm install . per scaricare tutte le dipendenze appena inserite.
  8. Se app/lib/setup.coffee un’occhiata alla configurazione predefinita di spine, c’è app/lib/setup.coffee cui avete require tutte le librerie necessarie dalle vostre 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 hai require lib/setup e carica il controller principale per la tua app. Inoltre, è necessario require altre classi in questi altri controller. È ansible utilizzare spine controller something o un spine model something per generare modelli per controller e modelli. Il tipico controller Spine ha il seguente aspetto, 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. Generalmente, index.html generato di default andrà bene per il caricamento della tua app, ma verrà modificato se necessario. In base alle proprie esigenze, inserisce solo un file js e un file css , che non è necessario modificare.

  11. Modifica i tuoi file stilo secondo necessità nella cartella css . È molto più flessibile di CSS 🙂
  12. Dalla folder , esegui il hem server per avviare un server orlo e vai a localhost:9294 per vedere la tua app. (Se hai installato orlo a livello globale.) Ha alcuni argomenti nascosti, ad esempio --host 0.0.0.0 ascolto su tutte le porte.
  13. Crea il resto della tua app utilizzando le tecniche MVC appropriate e utilizza lo stilo per CSS e l’eco per le viste. O non usare affatto Spine, e orlo funzionerà ancora bene con Coffeescript e npm. Esistono molti esempi di progetti che utilizzano entrambi i modelli.

Un’altra cosa: normalmente, il hem server si aggiornerà automaticamente man mano che aggiorni il tuo codice e salvi i file, il che lo rende un gioco da ragazzi per il debug. L’esecuzione di hem build compilerà la tua app in due file, application.js , che è minified e application.css . Se esegui questo hem server , userà quei file e non si aggiornerà più automaticamente. Quindi non hem build finché non avrai effettivamente bisogno di una versione ridotta della tua app per la distribuzione.

Ulteriori riferimenti: Spine.js e orlo per iniziare

Ecco una soluzione che ha un approccio molto diverso: raggruppa tutti i moduli in un object JSON e richiede moduli leggendo ed eseguendo il contenuto del file senza ulteriori richieste.

Implementazione demo clientside pura: http://strd6.github.io/editor/

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

STRd6 / richiede dipende dalla disponibilità di un pacchetto JSON in fase di runtime. La funzione require è 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 ansible a uno può richiedere lo stile Node.js sul client.

La struttura del pacchetto è la seguente:

 entryPoint: "main" distribution: main: content: "alert(\"It worked!\")" ... dependencies: :  

A differenza del nodo, un pacchetto non conosce il suo nome esterno. Spetta al pacakge inclusa la dipendenza per nominarlo. Ciò fornisce l’incapsulamento completo.

Dato tutto questo setup ecco una funzione che carica un file all’interno di 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 i moduli hanno accesso.

Una funzione di require è esposta ai moduli in modo che possano richiedere altri moduli.

Vengono inoltre esposte proprietà aggiuntive come un riferimento all’object globale e alcuni metadati.

Finalmente eseguiamo il programma all’interno del modulo e dato contesto.

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

Controlla cartero se usi il nodo / express sul backend.

Suggerirei di dare un’occhiata al toolkit del dojo che sembra soddisfare la maggior parte delle vostre esigenze. Quello di cui non sono sicuro è CoffeeScript.

dojo funziona con moduli scritti nel formato Asynchronous Module Definition (AMD). Ha un sistema di build con pacchetti e puoi aggregarli in uno o più file (chiamati layer). 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 beta v1.9 è prevista per il prossimo mese.

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

l’iniezione di dipendenza con caricamento asincrono + browserify sarà un’altra buona scelta, confronta con requirejs

asincrono-frontend-dipendenza-gestione-senza-AMD