javascript - modules - RequireJS: Multiple main.js?

requirejs modules

Question

He estado construyendo una aplicación de una sola página usando requireJS y hasta ahora me encanta. Llegué al punto de desarrollar otras partes del sitio fuera de la aplicación principal y no estoy realmente seguro de cómo (o si) usar requireJS para esto.

En mi aplicación principal, todo se desencadena con esta etiqueta de script:

<script data-main=''/scripts/main'' src=''/scripts/libs/require.js''>

Ahora estoy desarrollando la página de inicio que tiene sus propios scripts frontales. Usar el optimizador cuando se trata de obtener el sitio en vivo que main.js todos estos scripts en un paquete main.js Estoy luchando por comprender dónde encaja el resto de mi sitio en esto.

Supongamos que mi aplicación depende de jQuery y se incluye en la versión optimizada de la aplicación, ¿qué ocurre si quiero usar jQuery en la página de inicio? No quiero cargar en main.js mi aplicación solo para acceder a mi módulo jQuery. Así que sí ... ¡un poco confundido!

Estoy imaginando una estructura de sitio como esta:

/scripts
  - app-main.js //(includes all module dependencies after optimzation)
  - home-main.js //(includes all module dependencies after optimzation)

Aplicación:

<script data-main=''/scripts/app-main'' src=''/scripts/libs/require.js''>

Página principal:

<script data-main=''/scripts/home-main'' src=''/scripts/libs/require.js''>

Preguntas

1. ¿Cómo puedo usar RequireJS para desarrollar diferentes partes de un sitio?
2. ¿Se recomienda tener múltiples archivos main.js?
3. ¿Cómo pueden mis diferentes archivos main.js compartir módulos comunes como jQuery post optimization?

Answer 1

Entonces require.js siempre debe usarse en cualquier página para permitir la modularidad y un espacio de nombres limpio. Creo que cada ''aplicación'' necesita su propio script main.js. Al optimizar su sitio, r.js le permite excluir módulos de la compilación, lo que siempre debe hacer para jQuery.

De esa manera require.js siempre cargará jquery.js sobre la marcha y la mayor parte del tiempo desde el caché. Encontrar otros módulos que puedan almacenarse en la memoria caché entre su aplicación y la página de inicio tendrá que hacerse a su propia discreción y dependerá del flujo de sus usuarios y de otros factores.

Parece que tienes dos proyectos, una aplicación y un sitio de marketing. Creo que estos deberían estar separados por completo y deberían tener sus propias carpetas ''js'' que contengan sus propios main.js.

Answer 2

El equipo requirejs tiene algunas muestras para aplicaciones de varias páginas en github. Echa un vistazo a: https://github.com/requirejs/example-multipage

Básicamente, vas a tener la siguiente estructura:

• page1.html: página 1 de la aplicación.

• page2.html: página 2 de la aplicación.

• aplicación js: el directorio para almacenar módulos específicos de la aplicación.

• lib: el directorio para contener módulos de terceros, como jQuery.

• common.js: contiene la configuración requirejs, y será el objetivo de compilación para el conjunto de módulos comunes.

• page1.js: utilizado para el principal de datos para page1.html. Carga el módulo común, luego carga la aplicación / main1, el módulo principal de la página 1.

• page2.js: utilizado para el principal de datos para page2.html. Carga el módulo común, luego carga la aplicación / main2, el módulo principal para la página 2.