El código fuente de jQuery usa Require.js, pero el archivo final no?

Archivo jQuery sin comprimir: http://code.jquery.com/jquery-2.0.3.js jQuery Código fuente: https://github.com/jquery/jquery/blob/master/src/core.js

¿Qué están haciendo para que parezca que la salida final no está utilizando Require.js bajo el capó? Los ejemplos de Require.js le indican que inserte toda la biblioteca en su código para que funcione como un solo archivo.

Almond.js, una versión más pequeña de Require.js también le dice que se inserte en su código para tener un archivo javascript independiente.

Cuando se minimiza, no me importa la hinchazón adicional, solo son unos pocos killobytes adicionales (para almond.js), pero unminified es apenas legible. Tengo que desplazarme hacia abajo, más allá del código de almond.js para ver la lógica de mi aplicación.

Pregunta

¿Cómo puedo hacer que mi código sea similar a jQuery, en el que la salida final no se parece a una Frankenweenie?

Respuesta corta:

Tienes que crear tu propio procedimiento de comstackción personalizado.

Respuesta larga

El procedimiento de comstackción de jQuery funciona solo porque jQuery define sus módulos de acuerdo con un patrón que permite que una función de convert transforme la fuente en un archivo distribuido que no usa define . Si alguien quiere replicar lo que hace jQuery, no hay acceso directo: 1) los módulos deben diseñarse de acuerdo con un patrón que permita eliminar las llamadas define , y 2) debe tener una función de conversión personalizada. Eso es lo que hace jQuery. La lógica completa que combina los módulos jQuery en un archivo está en build / tasks / build.js .

Este archivo define una configuración personalizada que pasa a r.js Las opciones importantes son:

  • que se establece en "dist/jquery.js" . Este es el único archivo producido por la optimización.

  • wrap.startFile que se establece en "src/intro.js" . Este archivo se dist/jquery.js a dist/jquery.js .

  • wrap.endFile que se establece en "src/outro.js" . Este archivo se adjuntará a dist/jquery.js .

  • onBuildWrite que se establece para convert . Esta es una función personalizada .

La función de conversión se llama cada vez que r.js desea generar un módulo en el archivo de salida final. La salida de esa función es lo que r.js escribe en el archivo final. Hace lo siguiente:

  • Si un módulo es del directorio var/ , el módulo se transformará de la siguiente manera. Tomemos el caso de src / var / toString.js :

     define([ "./class2type" ], function( class2type ) { return class2type.toString; }); 

    Se convertirá:

     var toString = class2type.toString; 
  • De lo contrario, la llamada de define(...) se reemplaza con el contenido de la callback pasada para define , la statement de return final se elimina y se eliminan las asignaciones a las exports .

He omitido detalles que no pertenecen específicamente a su pregunta.

Puede usar una herramienta llamada AMDClean por gfranko https://www.npmjs.org/package/amdclean. Es mucho más sencillo de lo que está haciendo jQuery y puede configurarlo rápidamente.

Todo lo que necesita hacer es crear un módulo muy abstracto (el que desea exponer al scope global) e incluir todos sus submódulos en él.

Otra alternativa que he estado usando recientemente es browserify . Puede exportar / importar sus módulos a la manera de NodeJS y utilizarlos en cualquier navegador. Necesitas comstackrlos antes de usarlo. También tiene complementos trillados y gruñidos para configurar un flujo de trabajo. Para mejores explicaciones, lea las documentaciones en browserify.org .

    Intereting Posts