Administración de Dependencia del lado del cliente en CoffeeScript

Question

¿Cuál es la mejor forma de gestionar la dependencia entre los archivos CoffeeScript si los archivos javascript resultantes finalmente necesitan concatenarse para su uso en el lado del cliente?

Para el lado del servidor CoffeeScript Solo puedo usar la palabra clave 'require' para requerir otras piezas de javascript. Cuando esto se compila para que las aplicaciones del lado del cliente tengan el árbol de dependencias, según las necesidades, se calcula y se produce un archivo javascript autónomo concatenado. ¿Hay alguna forma de hacerlo de una manera genérica?

Answer 1

Por lo general, para el empaquetado de JavaScript del lado del cliente (y CSS), desea algún tipo de complemento de empaquetado de activos. Usamos Jammit, pero hay muchas otras opciones: Sprockets, Django-Compress ... y más.

Answer 2

Villain (un motor de juego CoffeeScript para navegadores) define funciones que hacen precisamente eso (administración de dependencias y concatenación js).

El código para que se encuentre en estos dos archivos:

• cake.coffee, ver, determineDependencies(), wrapModule() y bundleSources()
• brequire.coffee, un reemplazo requerirá para el navegador, para usar con wrapModule()

Lo uso here (vea la tarea de tarta 'bundle').

Nota: acabo de declarar directorio de construcción del módulo 'main' y Villain escanea mis archivos JS compilados para construir el árbol de dependencias (empezando por index.js), a continuación, crea un archivo de paquete de JavaScript que contiene require reemplazo de Villain y todo mi código en cuestión ordenados y correctamente envuelto.

El autor de Villain lo usa en orona, un juego de CoffeeScript hecho con Villain.

Answer 3

Para la gestión de dependencias en el lado del cliente, uso requirejs para fuente de javascript y coffeescript. Es posible utilizar un complemento requirejs para cargar archivos nativos de café, pero prefiero "compilar" en js.

requirejs también proporcionan/trabajan con r.js optimizer. Se puede usar para agregar un conjunto de archivos js en uno y minimizarlo. no es necesario especificar el archivo para agregar, es la definición de dependencia de cada módulo requerida por su "main.js". (función que coincida con su solicitud)

Algo que me gusta mucho con requirejs, es "promoto" la creación de módulos y declarar dependencias explícitas.

# 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

Otra opción es utilizar CoffeeToaster, que utiliza otro método de implementación de los diseños del módulo CJS AMD /.

Echale un vistazo: http://github.com/serpentem/coffee-toaster

Answer 5

que he usado (y supongo que todavía estoy usando) RequireJS pero he empezado a encontrar a ser bastante torpe. Muchos de mis archivos terminan teniendo ~ 10-12 importaciones en la parte superior que ocupan mucho espacio y no se ven bien.

Para un nuevo proyecto intenté browserify. ¡Es genial! Y si usa ronco (debería), puede realizar una tarea de vigilancia para buscar su código en el cambio. grunt-browserify también proporciona la capacidad de hacer una transformación coffeescript.

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

Así que su tarea reloj en su Gruntfile.coffee sería algo como:

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

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