Share
Los desarrolladores front-end enfrentan una variedad de desafíos al crear sitios que tienen soluciones repetitivas. Todos los sitios utilizan un esqueleto DOM similar, así como muchas características y atributos comunes. Volo pretende eliminar parte del esfuerzo del proceso, lo que permite a los desarrolladores centrarse en los nuevos aspectos de un proyecto, como se indica en el mismo.
Si agrega un archivo JavaScript que no es compatible con AMD, Volo intentará convertirlo por usted..
Volo es una aplicación que ayuda a los desarrolladores front-end automatizando sus procesos. Te permite crear proyectos basados en una plantilla; Puede ampliar estas plantillas y configurar comandos personalizados para automatizar tareas repetitivas..
Volo fue creado con una relación muy especial con GitHub; Entiende los repositorios GIT, así como las ramas y etiquetas. No hay un paquete o repositorio especial de Volo; Si hay algo en GitHub, puedes usarlo en tu proyecto. Esto es lo que distingue a Volo de aplicaciones similares..
Volo fue creado por James Burke, el mismo James Burke que creó la muy popular biblioteca require.js.
Puede que no te sorprenda que Volo tenga un flujo de trabajo muy evaluado; asume que desea utilizar AMD adecuado para los archivos, así como proporcionar ajustes preestablecidos sobre dónde colocar los archivos.
¿Esto es malo? No realmente, deberías estar haciendo esto de todos modos. Además, puede anular los comandos si necesita hacerlo.
Así que vamos a empezar con algunos de los comandos de Volo..
Probablemente usaras el crear comando primero Mencioné que Volo está profundamente arraigado en GitHub, pero, curiosamente, Volo no usa GIT. Por lo general, solo desea una instantánea de un repositorio, no todo su historial de confirmación; así que Volo solo descarga los archivos del repositorio sin los datos reales de GIT.
El método más simple de referenciar una plantilla es simplemente proporcionar el nombre del repositorio. Por ejemplo, si desea copiar un repositorio llamado 'starterTemplate', simplemente escriba el siguiente comando:
volo crear myApp starterTemplate
Suponiendo que el repositorio es el primer resultado devuelto por GitHub, Volo descargará e "instalará" la plantilla en un nuevo directorio llamado myApp.
Esto es un poco arriesgado, especialmente si prefiere nombrar sus repositorios con títulos muy genéricos. Afortunadamente, puede especificar más detalles para limitar el conjunto de resultados. El sistema de filtrado es bastante avanzado cuando se trata de descifrar su entrada. Básicamente, puedes usar:
volo create appName userName / repoName / [rama | etiqueta]
También puede omitir ciertas piezas de información. Por ejemplo, puede omitir el nombre de usuario de GitHub, lo que hace que Volo busque el primer proyecto con el nombre y la rama.
Alternativamente, puede especificar el nombre de usuario pero omitir la versión / rama, y Volo descargará la última versión etiquetada.
Si no se encuentran etiquetas, Volo vuelve a la rama maestra.
Además, no es necesario especificar una versión exacta. Escribiendo una expresión como "> 1.0"le dice a Volo que descargue una versión mayor a 1.0.
Por último, pero no menos importante, no tienes que usar un repositorio de Github; simplemente pase la URL al archivo zip que desea usar como plantilla. Para copiar una carpeta local, puede utilizar el siguiente formato:
local: / ruta / a / directorio
Así que hay una variedad de opciones que puede usar para seleccionar el repositorio que desea, e incluso puede omitir el nombre del repositorio para usar la plantilla predeterminada de Volo..
¿No está seguro de quién es el dueño de un repo popular? Utilizar el buscar mando.
búsqueda de volo nombre
Utiliza la misma búsqueda de GitHub que crear; para que pueda estar seguro de que el primer repositorio en sus resultados de búsqueda es el repositorio que Volo descargará.
los buscar El comando es solo para encontrar un repositorio o recuperar su información. Como resultado, carece de algunas de las funcionalidades encontradas en el crear mando. Por ejemplo, James creó algunas plantillas oficiales que puede usar, pero es posible que no sepa sus nombres..
Ejecutando
búsqueda volo volojs / plantillamuestra algunas buenas opciones para usar.
No tiene que ser demasiado preciso con sus criterios de búsqueda; Volo hace un trabajo decente encontrando lo que quieres. Es sorprendentemente rapido.
Si desea más información sobre un repositorio, como números de versión o enlaces, puede usar el nombre apropiado info mando. Uno de los resultados de búsqueda volo volojs / plantilla es un repositorio llamado 'volojs / create-responsive-template'. Puede recuperar más información sobre este repositorio escribiendo:
volo info volojs / create-responsive-template
Utilizando la crear, buscar, y info comandos, podemos asumir que hemos creado nuestra aplicación. Qué es lo siguiente?
A continuación, tenemos que añadir dependencias. Esto es bastante fácil, y usa las mismas opciones que las crear comando con algunas adiciones. Además de poder especificar un usuario, sucursal / etiqueta o URL de GitHub a un zip, el añadir comando le permite añadir "#"para incorporar un archivo específico del repositorio. Muchos repositorios tienden a tener la biblioteca JaveScript que desea, pero está empaquetado junto con demostraciones y documentación. La mayoría de las veces, solo desea la biblioteca y añadir comando te permite hacer esto.
Supongamos que desea descargar una biblioteca llamada 'foo.js'. Usted puede simplemente escribir:
volo agregar usuario / fooRepo / v1.5 # foo.js
Esto descarga el archivo zip completo de GitHub, extrae solo el foo.js archivo y lo agrega a su proyecto. Esta característica del hashtag no es específica de los nombres de archivo; puede pasar un nombre de carpeta para agregar solo la carpeta especificada a su proyecto.
Anteriormente mencioné que Volo espera que practiques la DMAE adecuada. Por lo tanto, si agrega un archivo JavaScript que no es compatible con AMD, Volo intentará convertirlo por usted. El proceso es bastante simple..
Comienza preguntando qué dependencias usa su archivo JavaScript.
Puede pasar los nombres de las dependencias en una lista separada por comas, o opcionalmente puede darles un nombre de variable. Este es un ejemplo de lo que puede escribir para un complemento de jQuery:
jquery1.9 = jQuery, jqueryui
Esto le dice a Volo que la biblioteca especificada requiere el archivo llamado jquery1.9 Y pasarlo bajo el nombre de la variable. jQuery. Luego agregamos una coma para declarar la siguiente dependencia: jqueryui.
Una vez que termine de declarar sus dependencias, puede declarar lo que desea exportar desde su script. Normalmente no exporta nada en un complemento de jQuery; eso es manejado por jQuery en sí. Pero si tiene una biblioteca de JavaScript que necesita exportar algo, simplemente escriba el nombre de la variable deseada en su script. Puede utilizar esta función de conversión sobre la marcha con el amdificar mando:
volo amdify
Simplemente pase el nombre de archivo deseado.
También puede cambiar automáticamente el nombre de un archivo descargado. Por ejemplo, es posible que desee agregar un archivo llamado jquery.pluginName.1.3.min.js, pero no es un archivo conveniente para hacer referencia en sus scripts. Puede pasar un nuevo nombre como el parámetro final a la añadir comando, y Volo cambiará el nombre del archivo.
En resumen, podemos instalar este complemento pseudo jQuery desde un repositorio escribiendo lo siguiente:
volo add userName / RepoName / v1.3 # jquery.pluginName.1.3.min.js newName.js
Volo descargará el repositorio especificado, extraerá solo el archivo dado para el complemento, le preguntará cómo convertirlo para que sea compatible con AMD y lo coloque en su proyecto con el nuevo nombre. Es mucho control y automatización en un comando muy fácil de usar.
Ahora vamos a pasar a Volofiles.
Los volofiles le permiten automatizar tareas mediante la creación de comandos tipo macro. Por ejemplo, los usuarios de CoffeeScript y SCSS pueden emitir manualmente los siguientes comandos para compilar sus archivos:
coffee -c coffee-lib / -o lib / coffee -c app.coffee sass css / main.scss css / main.css
Esta es una gran cantidad de comandos para ejecutar repetidamente. Naturalmente, uno puede agregar estos comandos a un archivo bash, pero la automatización de múltiples operaciones implica probablemente un archivo bash semi-complicado o varios archivos bash. Con Volo, creas un archivo llamado volofile. Dentro de este archivo, crea un objeto JavaScript que contiene los comandos que desea ejecutar. Entonces simplemente puedes llamarlos como si fueran comandos nativos..
Aquí hay una muestra. volofile utilizando parámetros comunes:
Accentsconagua
module.exports = 'hi': 'summary': 'Un comando para decir Hello', 'doc': 'Enter Doc Text Here o Load a file', 'validate': function (namedArgs, arg1) if ( namedArgs.cancel == "true") return new Error ('Se ha establecido el parámetro "cancelar"'); , 'ejecutar': ['echo "Hello World"', 'echo "¿Cómo estás hoy?"'], 'nextCommand': … A continuación, podría escribir volo -h para ver estos comandos y su resumen. Entrando volo hi -h muestra lo que hay en el Doc campo. los validar la clave es opcional, y puede usarla con fines de prueba para salir opcionalmente si hay un problema. Por último, pero no menos importante, tenemos la correr Propiedad, que contiene la lista de comandos a ejecutar. Puede ingresar una cadena simple o una matriz de cadenas, y Volo procesará y ejecutará cada una en consecuencia.
Con el comando anterior, podría escribir:
volo hola
Para obtener la salida, o:
volo hi cancel = true
Para activar el Si declaración y salir con el mensaje de error proporcionado. Este es probablemente el ejemplo más básico, y tiene muchas más opciones disponibles al crear sus propios comandos..
Mencioné que Volo procesa cada cadena en el correr propiedad. La muestra anterior utiliza la configuración de 'último recurso'. Volo primero busca ciertas características en sus comandos, y solo ejecuta la cadena en el terminal estándar si no puede determinar lo que quiere. Sin embargo, tienes dos opciones antes de eso, y se llaman 'v'y'norte'.
v'y'norte'Palabras claveEstas dos palabras clave le permiten inyectar funcionalidad personalizada en sus cadenas de ejecución. Si necesita leer archivos, ejecutar procesos u otras tareas específicas del sistema operativo, desea utilizar el 'v'palabra clave. Simplemente escribiendo el comando (por ejemplo,. rm archivo.js) solo funciona en sistemas operativos que soportan el comando dado. Mediante el uso vLos comandos, aseguran el soporte multiplataforma de su volofile. Por ejemplo, puede agregar la siguiente cadena de ejecución si desea copiar un archivo de una ubicación a otra:
ejecutar: 'v.copyFile file_one file_two'
Este comando es multiplataforma. Para ver la lista completa dev'opciones, eche un vistazo al archivo de origen. Puede agregar parámetros con un espacio (como en el terminal) en lugar de usar corchetes.
A continuación tenemos el norte palabra clave, que se asigna a los módulos de node.js ejecutables. Si especifica un comando bajo la norte palabra clave, Volo verifica si puede encontrar el ejecutable node.js en el proyecto privado del proyecto actual. nodo_módulos y vuelve a la carpeta de módulos node.js global si no se encuentra uno.
Node.js, o más específicamente NPM, tiene una gran colección de herramientas de desarrollo de calidad creadas por muchas personas inteligentes y creativas..
Volo aprovecha ese enorme recurso al permitirle conectar sus ejecutables directamente en sus Volofiles. James Burke incluso ha creado una plantilla para crear tus propios módulos node.js específicamente para Volo, pero llegaremos a eso en un minuto..
Un ejemplo de usar el norte palabra clave es el módulo de CoffeeScript. Si desea compilar un directorio que contenga archivos CoffeeScript, podríamos escribir el siguiente comando:
'run': 'n.coffee -c coffee-lib / -o lib /'
Incluso si CoffeeScript no está instalado globalmente, puede asegurarse de que se ejecutará en todos los sistemas operativos desde el local nodo_módulos carpeta.
Ahora puede usar la plantilla de comando que mencioné (descargue aquí, por cierto) para crear un comando Volo reutilizable para usar en todos sus proyectos. Por ejemplo, si tiene un módulo que respalda su aplicación, puede incluirlo en todos sus proyectos..
Cree un módulo NPM estándar que exporte las propiedades mencionadas anteriormente (
resumen,correretc) y requiere el módulo en su Volofile.
Entonces, con su paquete agregado a NPM, puede simplemente escribir:
npm install commandName
Y en tu volofile, simplemente escribe:
module.exports = 'commandName': require ('node_modules / commandName / index'); Dónde index.js Es el nombre de tu extensión. Debido a que su archivo exporta las propiedades necesarias, las opciones se inyectarán directamente en su volofile bajo el nombre de comando dado. Realmente no lo llamaría una característica personalizada (es JavaScript estándar), pero es bueno saber que tienes esta opción.
Ahora, con la teoría fuera del camino, veamos un ejemplo del mundo real. Construiremos una aplicación usando Volo..
Volo es un paquete NPM, por lo que su instalación es tan simple como:
(sudo) npm install -g volo
Para este artículo, pensé que crearía una pequeña página web para generar un mapa de su área, que muestre quiénes son los alcaldes de FourSquare de sus sitios favoritos. No es una idea profunda increíble, pero pondrá a Volo a prueba..
Así que para empezar, necesitamos un repo. Puede encontrar una serie de plantillas de inicio, creadas específicamente para Volo, simplemente buscando en GitHub. La plantilla predeterminada viene con las necesidades básicas: un simple esqueleto HTML y una carpeta JavaScript con una configuración de barebones de AMD.
También obtiene un volofile con un comando de compilación para compilar los archivos JavaScript y CSS del proyecto.
No voy a usar la plantilla estándar, ya que me gustaría tener algunos recursos más. Después de una búsqueda rápida en GitHub, encontré una plantilla oficial que contiene los valores predeterminados, el marco de arranque y otros recursos.
Entonces, para crear nuestro nuevo proyecto (al que llamé 'turf'), simplemente puede escribir lo siguiente en una ventana de terminal:
volo create turoj volojs / create-responsive-template cd turf
Esto crea la carpeta del proyecto y descarga una instantánea del repositorio especificado. A continuación, para descargar otros recursos. Obviamente usaremos jQuery, así que vamos a agregarlo:
volo add jquery
También necesitamos una forma de mostrar un mapa en la página. Google Maps viene a la mente, así que usaremos una biblioteca llamada gmaps. El archivo JavaScript contiene toda la biblioteca; por lo tanto, realmente no necesitamos el resto del repositorio. Además, puede ver que la biblioteca está almacenada dentro de una variable llamada GMaps, y requiere la API de Google maps como una dependencia..
Hay un pequeño problema con esto: la API de Google Maps no es compatible con AMD y es una biblioteca asíncrona.
Cuando carga la URL única, continúa cargando otros recursos por su cuenta. Esto hace que el uso de require.js estándar sea un problema, pero hay un complemento que maneja esta situación exacta. Es parte de un repo llamado "requirejs-plugins", pero una vez más, no necesitamos el repo completo. Entonces, escriba lo siguiente en la ventana de terminal:
volo add requirejs-plugins # src / async.js
Con el complemento asíncrono, podemos cargar nuestras dependencias asíncronas especiales..
Tenemos dos opciones para instalar el complemento real:
Te mostraré cómo usar ambas opciones. Para convertir el archivo, simplemente añádelo. Volo detectará automáticamente que el archivo necesita ser convertido:
volo add HPNeo / gmaps # gmaps.js
Volo fue creado con una relación muy especial con GitHub; Entiende los repositorios GIT, así como las ramas y etiquetas..
De acuerdo con la página Github del proyecto, se basa en la API de Google Maps. Hay un pequeño problema con el ingreso de la URL porque contiene caracteres no compatibles (el signo igual). Así que vamos a utilizar un marcador de posición; Sólo tipo mapas de Google y pulsa enter. A continuación, necesitamos especificar qué queremos exportar. Tipo GMaps (con las dos letras mayúsculas; ese es el nombre de la variable) y pulsa enter. Volo terminará de convertirlo y lo agregará al js / lib carpeta.
Porqué el js / lib ¿carpeta? Si echas un vistazo a la paquete.json archivo en la raíz de su proyecto, verá una entrada llamada baseUrl bajo la amd propiedad. Esto le dice a Volo dónde colocar todos los archivos JavaScript descargados. En realidad, hay una serie de ubicaciones en las que Volo busca para decidir dónde colocar las cosas:
baseDir propiedad bajo una entrada nombrada volo baseUrl propiedad de nuevo bajo volo baseUrl debajo amd como tenemos aquíjs carpeta en su directorio actualguiones carpeta en su directorio actualSi no existe ninguna de estas ubicaciones, Volo coloca el archivo en el directorio actual..
Con el módulo instalado, todavía debemos reemplazar el marcador de posición que creamos para la API de Google Maps. Abre el www / js / lib / gmaps.js Presente y reemplace el marcador de posición en la primera (o segunda) línea con lo siguiente:
async! http: //maps.google.com/maps/api/js? sensor = false y library = places
Esto le dice a Volo que incluya el complemento asíncrono y le pase la URL de la API de Google Maps.
El módulo GMaps ahora está completamente instalado, pero requiere que ingrese las coordenadas de longitud y latitud específicas, algo que la mayoría de los usuarios no sabrán. Así que deberíamos tener algún tipo de complemento de autocompletado que convierte los nombres de ubicación en coordenadas.
Después de otra búsqueda rápida en Github, encontré un plugin jQuery llamado geocompletado por ubilabs. Tampoco es compatible con AMD, pero usaremos la función shim de require.js. En el terminal escriba el siguiente comando:
volo add -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
los amdoff La opción evita que Volo convierta el archivo, y el parámetro final cambia el nombre del archivo jquery.geocomplete.js a geocomplete.js. Esto no es obligatorio, pero hace que la referencia sea más conveniente.
Ahora abre el www / js / app.js archivo, y reemplace la declaración de configuración require.js en la parte superior:
requirejs.config (baseUrl: 'js / lib', rutas: app: '… / app', shim: 'geocomplete': deps: ['jquery', 'async! http: //maps.google .com / maps / api / js? sensor = false &raries = places ']);
Solo para ejecutar los ajustes que ya estaban allí., baseUrl le dice a require.js dónde buscar archivos relativos, y la paths.app La opción le dice a require.js que si un nombre de módulo tiene una referencia a una ubicación llamada "aplicación", entonces debe reemplazarse con lo que se especifica ('... / aplicación').
los calce sección es lo que agregué al archivo. Le indica a require.js que primero cargue jQuery y la API de Google Maps cuando alguien carga un archivo llamado geocompletar. Opcionalmente podría establecer otra propiedad llamada las exportaciones, El nombre de la variable a exportar. No necesitamos exportar nada porque se trata de un complemento y se adjunta al objeto jQuery.
En este punto, tenemos los archivos necesarios para mostrar el mapa y recuperar las coordenadas necesarias. No hemos escrito ningún código, pero sí tenemos todas las dependencias..
Para comenzar a crear prototipos de nuestra aplicación, necesitamos escribir algo de HTML. Abre el index.html archiva y elimina todo lo que está dentro de las etiquetas del cuerpo excepto el element at the bottom. You should be left with a file like the following:
A continuación, agregue un campo de entrada de texto para el cuadro de búsqueda y un marcador de posición para el mapa real. Su nueva área del cuerpo debe verse algo como esto:
Es un poco más que lo básico para que se ajuste a las reglas CSS de bootstrap. Le di al texto una identificación de buscar y el mapa de una identificación de mapa. Ahora vamos a abrir el archivo JavaScript.
Volo es una aplicación que ayuda a los desarrolladores front-end automatizando sus procesos..
Lo desglosaré para aquellos de ustedes que son nuevos en requerir.js. La razón principal para usar algo como require.js es asegurarse de que las dependencias de sus scripts se carguen cuando, y solo cuando, su script realmente las necesite. Esto aumenta la velocidad general de su sitio y simplifica sus archivos HTML (no necesita muchos scripts de referencia).
Puede ver la secuencia de comandos en la parte inferior del archivo HTML que apunta a la biblioteca require.js, y también tiene un principal de datos atributo que se ejecuta automáticamente una vez que require.js está listo.
Si abres js / app.js, nuestra sección de configuración modificada y una declaración de requerimiento en la parte inferior. Tenga en cuenta que no necesita la extensión de archivo. En el archivo de índice, nos referimos js / app (sin el .js), y aquí carga app / main.
Normalmente, una referencia a app / main se asignaría a un archivo llamado main.js dentro de una carpeta llamada aplicación (todo relativo a la js / lib carpeta). Pero recuerde que en la configuración, dijimos cualquier referencia a una ubicación llamada aplicación, debe ser reemplazado con ... / app. En lugar de buscar js / lib / app / main.js, require.js recuperará js / app / main.js.
A continuación, abrir js / app / main.js, elimina todo y escribe lo siguiente:
define (['jquery', 'gmaps', 'geocomplete'], función ($, gmaps) $ (documento) .ready (function () $ ("# search"). geocomplete ();); ); El primer parámetro es una matriz de nuestras dependencias. La segunda es una función con nombres de parámetros para jQuery (PS) y GMaps (gmaps). Recuerde que geocomplete es un complemento de jQuery, por lo que no hay razón para darle un parámetro correspondiente ...
La función pasada cuando el segundo parámetro se ejecuta después de que las dependencias terminan de cargarse.
Dentro de esta función, ejecutamos la geocompletar () Método cuando el documento está listo..
Ahora puede abrir la página en su navegador, y si todo salió bien, el cuadro de texto debería decir "Ingrese una ubicación". Empieza a escribir, y verás algunos resultados..
Luego, debemos manejar el evento cuando se encuentra una coincidencia, es decir, cuando el usuario presiona la tecla Intro en el nombre de un lugar. Estos eventos son: geocodificar: resultado y el geocodificar: error. Agregue el código para manejar estos eventos:
$ (document) .ready (function () $ ("# search"). geocomplete () .bind ("geocode: resultado", function (event, result) // On Result) .bind ("geocode: error ", función (evento, resultado) alerta (" Ubicación no encontrada "););); El siguiente paso es recuperar la latitud y la longitud y generar un nuevo mapa. Los lat / long se almacenan en propiedades nombradas. geometry.location.hb y geometry.location.ib, respectivamente. Agregue el siguiente código dentro de geocodificar: resultado entrenador de animales:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var map = new gmaps (div: "#map", lat: lat, lng: lng, height: '380px');
Almacenamos las coordenadas y cargamos un nuevo mapa. Crear un mapa es simple: pasamos la identificación del contenedor junto con las coordenadas y la altura.
Ahora debería poder buscar y mostrar un mapa. A continuación, debemos interactuar con Foursquare y mostrar los "alcaldes" de tu ciudad.
Primero necesitamos una interfaz para la API de foursquare. Para ahorrar tiempo y permanecer en el tema, creé un repositorio que podemos clonar. Así que en la ventana de la terminal, escriba:
git clone https://github.com/gmanricks/MayorAPI www / foursquare
Esto descarga el repositorio y lo coloca en una carpeta llamada firme bajo la www directorio.
A continuación, abrir foursquare.php e inserte su ID de cliente y su secreto de cliente en las constantes de la clase. Si aún no tiene esta información, puede obtenerla en Foursquare registrando una aplicación.
El otro archivo en el repositorio (data.php) recupera las coordenadas del mapa a través de los parámetros GET y devuelve un objeto JSON. Entonces, para agregar los alcaldes al mapa, necesitamos reescribir el geocompletar: resultado controlador de eventos:
.bind ("geocodificación: resultado", función (evento, resultado) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, function (d) var map = new gmaps (div:" #map ", lat: lat, lng: lng, height: '380px'); var places = JSON .parse (d); if (places.error) alert ("Se ha alcanzado el límite de velocidad"); else for (índice var en lugares) var place = places [index]; if (place.mayor. foto) var html = ''+''+'
'+''+''+ place.mayor.name +''+''; map.drawOverlay (lat: place.lat, lng: place.lng, content: html); ); ) Primero definimos el latitud y lng variables, pero en lugar de crear inmediatamente el mapa, esperamos que se complete nuestra solicitud de Ajax. Estamos haciendo unas once llamadas API detrás de escena, por lo que puede tardar diez o quince segundos.
A continuación, nos aseguramos de que no se haya alcanzado el límite de velocidad y alertamos al usuario de manera apropiada. Finalmente, hacemos un ciclo a través de los resultados, agregando cada uno al mapa usando un comando de la biblioteca GMaps.
Ahora puedes abrir la página y probarla; ¡Todo debería funcionar! Con un poco de estilo y un poco de diseño, podría verse algo como esto:
Nuestra aplicación está completa, y el último paso es optimizarla. Primero eliminemos los archivos que no usamos. En el js / app / carpeta, puede eliminar todo menos el main.js expediente. En el js / lib / carpeta, eliminar los archivos nombrados appCache.js y network.js. Tampoco necesitas el manifest.webapp archivo, pero podría guardar si lo desea.
Ahora abre el volofile, y puede ver que la plantilla viene con un comando de compilación bastante complicado para optimizar y configurar los archivos JavaScript y CSS del proyecto. No necesitamos un script tan elaborado, así que elimínelo todo del archivo y sustitúyalo por lo siguiente:
module.exports = 'build': 'summary': 'Comando para compilar los archivos de origen', 'run': ['v.rm www-built', 'v.copyDir www www-built', 'v. rm www-built / js ',' herramientas de nodo / r.js -o baseUrl = www / js / lib paths.app =… / app paths.requireLib = require name = app include = requireLib out = www-built / js / lib / require.js ',' v.rm www-built / css ',' node tools / r.js -o cssIn = www / css / app.css out = www-built / css / app.css '] ;
Volo es una herramienta omnidireccional: obtienes lo que pones en él..
Esto es mucho más simple. Aquí, creamos un comando llamado construir que elimina el folde construido anterior si existe. A continuación, copia la totalidad. www Carpeta como base para nuestra versión compilada. A continuación, eliminamos el js Directorio (lo reemplazaremos con la versión optimizada).
Luego ejecutamos el optimizador de require.js para compilar los archivos JavaScript en un solo archivo. Puede notar que cambia el nombre del producto final a require.js; esto es una especie de "pirateo" porque no es realmente la biblioteca require.js. Pero ya que nuestro archivo HTML tiene una referencia a require.js Ya es más fácil cambiar el nombre del archivo Javascript que analizar todos los archivos HTML y cambiar las referencias de script.
Una vez que se completa ese comando, eliminamos la carpeta CSS (nuevamente para reemplazarla con la versión optimizada). Y por último, pero no menos importante, ejecutamos el optimizador require.js de nuevo, esta vez para el CSS.
Ahora puedes ejecutar construir volo desde su ventana de terminal y Volo ejecutará esta serie de comandos.
En su navegador, puede navegar a la construido por www carpeta en lugar de la www carpeta para asegurarse de que todavía funciona. En mi computadora, la construcción del proyecto redujo el tamaño del archivo a la mitad, desde poco menos de un megabyte hasta ~ 400kb. Probablemente puedas hacerlo aún más pequeño si minimizas el CSS..
En este artículo, le enseñé la sintaxis de Volo y creamos una aplicación de ejemplo. Aprendimos cómo usar Volo para c
'+'