Cómo estructurar un proyecto de JavaScript utilizando RequireJS

Question

Actualmente estoy trabajando en un gran proyecto de JavaScript para el que queremos definir nuestra propia API. Estoy usando RequireJS como mi cargador de dependencias y me viene bien, lo que me permite definir módulos en sus respectivos archivos. No hago uso de mi propio espacio de nombres, un módulo devuelve una instancia, que puede ser utilizado en otros módulos, es decir:

define(
    ['imported_module'], 
    function(module){ 
     module.doSomething(); 
    } 
) 

Sin embargo, como el número de archivos crece, me gustaría que decidir cómo estructurar estos archivos en carpetas. Actualmente utilizo el siguiente esquema para nombrar mis archivos:

[projectname].[packagename].[ModuleName] 

Un ejemplo podría ser stackoverflow.util.HashMap.js. Me gustaría presentar una carpeta de proyecto, una carpeta por cada paquete y cambiar el nombre de los archivos en el nombre de módulo, como:

stackoverflow/util/HashMap.js 

Este estructuras mi código muy claramente en carpetas, sin embargo el nombre del archivo refleja sólo el módulo ahora. Me gustaría definir algún tipo de enrutamiento para poder definir cómo RequireJS debería buscar los archivos. Ejemplo:

El archivo

stackoverflow/util/stackoverflow.util.HashMap.js 

debería ser importable por la declaración

define(['stackoverflow.util.HashMap'],function(HashMap){}); 

tiene experiencia cualquier persona con grandes proyectos estructurantes de JavaScript y si es así, ¿podría compartir su enfoque?

Answer 1

No debe especificar la información de enrutamiento en los nombres de sus archivos js, esos son los trabajos de las rutas de espacio de nombres y de carpetas. Entonces stackoverflow/util/HashMap.js está bien. Y puede usar define ("stackoverflow/util/HashMap", ....) para indicar la dependencia.

Si necesita colocar sus módulos en carpetas diferentes, puede configurar rutas para su cargador, consulte this manual en RequireJS API.

No hay mejor forma de estructurar sus archivos js. Pero poner el espacio de nombres raíz en una carpeta src siempre es una buena práctica. Puede ver dojo source code y YUI source code y utilizar formas similares para su proyecto. Ambos son proyectos de JavaScript a gran escala.

Answer 2

En realidad, es mejor obtener el enrutamiento js lib para cargar todos los js utilizando la interfaz estándar: "js.yoursite.com/lib-0.2.js" debería haber un enrutador (php u otro, y capaz de almacenar en caché las consultas). Entonces, allí puedes determinar y controlar pathes completos que usas. Debido a que el plugin de jquery común debe permanecer en un directorio, con jquery, y sus propios complementos personalizados no.

Y hay que controlar cada proyecto es poseer reglas:

jquery/ 
    plugins/ 
    jquery.prettyPhoto.js 
    jquery.min.js 

mySuperJS/ 
    stable.0/ -- there your production version for 1.0 branch 
    module.js 
    0.1/ 
    module.js 
    0.2/ 
    module.js 
    0.3/ 
    module.js 

myOtherlib/ 
    stable.0/ -- production version for all 0.* versions 
    stable.1/ -- production version for all 1.0 versions 
    0.1/ 
    0.2/ 
    0.3/ 
    0.4/ 
    0.4.1/ 
    0.4.1.18/ 

Estamos utilizando dicha estructura alrededor de un año y que es lo mejor para nosotros. Pero a veces utilizamos una solución más compleja y separamos todos los módulos de libs, complementos, herramientas, componentes y aplicaciones.