javascript - react - coffeescript vs typescript

Comunicación de archivos múltiples con coffeescript

Question

Cuando creo un nuevo archivo coffeescript, no puedo acceder al código en el código compilado de otro archivo porque se ajusta a algún ámbito de función. Por ejemplo:

CoffeeScript:

class ChatService
  constructor: (@io) ->

Javascript generado:

(function() {
  var ChatService;    
  ChatService = (function() {    
    function ChatService(io) {
      this.io = io;
    }    
    return ChatService;    
  })();    
}).call(this);

Al intentar llamar a ChatService en otro archivo, no está definido. ¿Cómo manejo múltiples archivos con coffeescript?

Answer 1

El enfoque habitual es definir un espacio de nombre global en la window :

window.App = { }

Eso iría a algún lugar en el código de inicialización de su aplicación antes de que ocurra algo más. Y luego, para tu clase:

class App.ChatService
  constructor: (@io) ->

Eso le permite hacer referencia a su clase a través de la App cualquier lugar que desee y no tiene que preocuparse por la contaminación del espacio de nombres global:

chatter = new App.ChatService

Si quisieras que tu ChatService verdaderamente global, podrías usar la class window.ChatService pero yo recomendaría que no sea así, excepto en las aplicaciones más triviales.

AFAIK, node.js tiene algo similar a window pero no estoy lo suficientemente familiarizado con node.js para decirte de qué se trata.

Answer 2

Según si se trata de un código del lado del cliente o del servidor, hay dos enfoques ligeramente diferentes.

Del lado del cliente: aquí adjuntamos elementos que deberían estar disponibles en todos los archivos en el espacio de nombre global ( window ) de la siguiente manera:

class window.ChatService
  constructor: (@io) ->

Luego, en otro archivo, ChatService y window.ChatService permitirán el acceso a la clase.

En el lado del servidor: Aquí debemos usar exports y require . En el archivo ChatService.coffee , tendría lo siguiente:

class exports.ChatService
  constructor: (@io) ->

Luego, para acceder desde otro archivo, puede usar:

ChatService = require(''ChatService.coffee'').ChatService

Nota: Si hay varias clases que está recibiendo de ChatService.coffee, este es un lugar donde realmente brilla el desempaquetado de CoffeeScript, como por ejemplo:

{ChatService, OtherService} = require(''ChatService.coffee'')

Ambos: básicamente, elegimos si ejecutamos el código del lado del servidor o del lado del cliente en función del entorno en el que nos encontramos. Una forma común de hacerlo:

class ChatService
  constructor: (@io) ->

if typeof module != "undefined" && module.exports
  #On a server
  exports.ChatService = ChatService
else
  #On a client
  window.ChatService = ChatService

Para conseguirlo:

if typeof module != "undefined" && module.exports
  #On a server
  ChatService = require("ChatService.coffee").ChatService
else
  #On a client
  ChatService = window.ChatService

La cláusula else del segundo bloque se puede omitir, ya que ChatService ya se refiere a la referencia adjunta a la window .

Si va a definir muchas clases en este archivo, puede ser más fácil definirlas como:

self = {}

class self.ChatService

Y luego adjúntelos como module.exports = self en el servidor y _.extend(window, self) en el cliente (reemplace _.extend con otra función de extend , según corresponda).

Answer 3

Separe sus clases con espacios de nombres y use cake para compilarlas todas en uno (o más) archivos .js resultantes. Cakefile se usa como configuración que controla en qué orden se compilan tus scripts de café, algo muy útil con proyectos más grandes.

Cake es bastante fácil de instalar y configurar, invocando cake from vim mientras editas tu proyecto es simplemente

:!cake build

y puedes actualizar tu navegador y ver resultados.

Como también estoy ocupado para aprender la mejor manera de estructurar los archivos y usar coffeescript en combinación con la columna vertebral y el pastel, he creado un pequeño proyecto en github para mantenerlo como una referencia para mí, tal vez también te ayude con el pastel. y algunas cosas básicas. Todos los archivos compilados están en la carpeta www para que pueda abrirlos en su navegador y todos los archivos fuente (excepto la configuración de tortas) están en la carpeta src . En este ejemplo, todos los archivos .coffee se compilan y combinan en un archivo de salida .js que luego se incluye en html.