Organización de varios archivos de CoffeeScript

Question

Estoy trabajando en una implementación de un servicio web en el que estamos escribiendo nuestro código front-end en CoffeeScript. El problema con el que he tropezado es que, mientras el proyecto crece, la funcionalidad debe separarse en diferentes archivos. Lo que realmente necesito es una estructura simple donde en el archivo utils.coffee tendré las funciones generales que se requieren de cada página y en cada archivo separado tendré page_foo.coffeepage_bar.coffee las funciones específicas. ¿Cómo puedo estructurarlo correctamente así que también me aseguro de que primero se cargue utils.coffee y que todos puedan acceder a él?

Answer 1

Puede comprobar cómo se hace en el proyecto gae-init (Descargo de responsabilidad: soy el creador).

La idea básica es que tiene todos los archivos *.coffee en un directorio específico, y luego un script de construcción que compila todos los archivos y los coloca en las rutas correctas.

Como le gustaría poder depurar fácilmente, mientras lo está desarrollando, el script de compilación debe tener una opción para simplemente compilarlos y otra opción para combinar & minimizarlos.

Answer 2

La orden de ejecución se respeta en los navegadores, así que solo incluya utils.js primero.

Una herramienta como CodeKit (http://incident57.com/codekit/) puede compilar y minify + unir todos sus archivos .coffee en uno .js, eso también es fácil de hacer con un script de shell.

Si su aplicación es realmente grande, lea en require.js y Asynchoronous Module Loading. Se le permitirá gestionar dependencias muy fácilmente y sólo cargar lo que sea necesario:

# page_foo.coffee 
define ['lib/utils'], ($) -> 
    // code that uses 'utils' 

Answer 3

Lo que hago es escribir una tarea de la torta de unirse y compilar archivos en una secuencia predeterminada, por ejemplo

task 'build', 'join and compile *.coffee files', -> 
    exec "coffee -j #{outJS}.js -C#{strFiles}", exerr 

donde outJS es el nombre de archivo donde quiero compilar JavaScript y strFiles es una cadena de nombres de archivo

Además, puede agregar tareas para minificar el código compilado con YUICompressor o su herramienta favorita. Y durante la observación de desarrollo, la unión, la compilación también puede automatizarse

task 'watch', 'watch and compile changes in source dir', -> 
    watch = exec "coffee -j #{outJS}.js -cw #{strFiles}" 
    watch.stdout.on 'data', (data)-> process.stdout.write data 

Tenga una mirada en this gist

Answer 4

Con CoffeeToaster usted tiene la capacidad de incluir ficheros que necesitará en la parte superior de ellos, asegurándose su archivo final ".js" (que también será una combinación de todos sus archivos CoffeeScript) tiene todo en el orden correcto, para usar dentro del navegador.

Tome una mirada en los documentos:
http://github.com/serpentem/coffee-toaster

También viene con un sistema de envasado que cuando está activado utilizará la jerarquía de su carpeta como espacios de nombres declaraciones a sus clases si quieres así, entonces usted puede extiende clases de varios archivos, hacer importaciones y el hijo, como como:

#<< another/package/myclass 
class SomeClass extends another.package.MyClass 

La configuración de construcción es extremadamente minimalista:

# => SRC FOLDER 
toast 'src_folder' 
    # => VENDORS (optional) 
    # vendors: ['vendors/x.js', 'vendors/y.js', ... ] 

    # => OPTIONS (optional, default values listed) 
    # bare: false 
    # packaging: true 
    # expose: '' 
    # minify: false 

    # => HTTPFOLDER (optional), RELEASE/DEBUG (required) 
    httpfolder: 'js' 
    release: 'www/js/app.js' 
    debug: 'www/js/app-debug.js' 

Incluso hay una opción de depuración que compila los archivos individualmente para facilitar los procesos de depuración y otras funciones útiles.