Gestione dipendenze lato client in CoffeeScript

Question

Qual è il modo migliore di fare Gestione delle dipendenze tra i file CoffeeScript se i file javascript risultanti alla fine devono essere concatenati insieme per l'utilizzo sul lato client?

Per lato server CoffeeScript Posso semplicemente usare la parola chiave 'require' per richiedere altri pezzi di javascript. Quando questo è compilato per le applicazioni lato client, l'albero delle dipendenze deve essere basato sul file javascript stand-alone, calcolato e richiesto. C'è comunque modo di farlo in un modo generico?

Answer 1

In genere, per il packaging lato client di JavaScript (e CSS), si desidera una sorta di plug-in di asset-packaging. Utilizziamo Jammit, ma ci sono molte altre opzioni: Sprockets, Django-Compress ... e altro ancora.

Answer 2

Villain (un motore di gioco CoffeeScript per browser) definisce le funzioni che fanno proprio questo (gestione delle dipendenze e js concatenazione).

Il codice per che si trova in questi due file:

• cake.coffee, vedere, determineDependencies(), wrapModule(), e bundleSources()
• brequire.coffee, una sostituzione necessaria per il browser, da usare con wrapModule()

Io lo uso here (vedere l'operazione di torta 'bundle').

Nota: Ho appena dichiarare directory di compilazione del modulo 'main', e Villain analizza i miei file JS compilati per costruire l'albero delle dipendenze (a partire da index.js), quindi crea un file pacchetto JavaScript contenente require sostituzione del cattivo e tutto il mio codice rilevante ordinati e avvolto correttamente.

L'autore di Villain lo utilizza in orona, un gioco CoffeeScript realizzato con Villain.

Answer 3

Per la gestione delle dipendenze lato client, utilizzo requirejs per l'origine javascript e coffeescript. È possibile utilizzare un plugin requirejs per caricare file di caffè in modo nativo, ma preferisco "compilarlo" in js.

requirejs fornire/lavorare con r.js optimizer. Può essere usato per aggregare un insieme di file js in uno e minarlo. non devi specificare il file da aggregare, è la definizione di dipendenza di ciascun modulo richiesta dal tuo "main.js". (funzione che corrisponde alla tua richiesta)

Qualcosa che mi piace molto con requirejs, "promots" che crea il modulo e dichiara dipendenze esplicite.

# A.coffee 
define(() -> 
    class A 
    constructor: (@c1, @c2) -> 
     @c2 ?= 1 

    m1 :() -> 
     "hello" 

    toString :() -> "#{@c1}#{@c2}" 
) 


# B.coffee 
define(['A'], (A) -> 
    a = new A(33) 
    console.log(a, a.m1()) 
) 

Answer 4

Un'altra opzione è quella di utilizzare CoffeeToaster, che utilizza un approccio di attuazione AMD/modelli modulo CJS.

Date un'occhiata: http://github.com/serpentem/coffee-toaster

Answer 5

Ho usato (e immagino sto ancora usando) requirejs ma ho iniziato a trovare per essere abbastanza goffo. Un sacco di miei file finiscono per avere ~ 10-12 importazioni nella parte superiore che occupano molto spazio e non sembrano grandi.

Per un nuovo progetto ho provato browserify. È ottimo! E se usi grunt (dovresti), puoi fare un compito di sorveglianza per rendere il tuo codice in cambiamento. grunt-browserify fornisce anche la possibilità di eseguire una trasformazione coffeescript.

https://github.com/jmreidy/grunt-browserify

Così il vostro compito orologio in Gruntfile.coffee sarebbe simile:

watch: 
    files: [ 
    "app/**/*.coffee" 
    ] 
    tasks: "browserify" 

browserify: 
    'build/app.js': ['app/**/*.coffee'] 
    options: 
    transform: ['coffeeify']