Share
Gli sviluppatori front-end affrontano una serie di sfide quando creano siti con soluzioni ripetitive. Tutti i siti utilizzano uno scheletro DOM simile, oltre a molte caratteristiche e attributi comuni. Volo ha l'obiettivo di rimuovere parte del processo, consentendo agli sviluppatori di concentrarsi sui nuovi aspetti di un progetto, come appunto allo stesso.
Se aggiungi un file JavaScript che non è compatibile con AMD, Volo proverà a convertirlo per te.
Volo è un'applicazione che aiuta gli sviluppatori front-end automatizzando i loro processi. Ti consente di creare progetti basati su un modello; è possibile estendere questi modelli e configurare i comandi personalizzati per automatizzare le attività ripetitive.
Volo è stato creato con un rapporto molto speciale con GitHub; comprende repository GIT, nonché rami e tag. Non ci sono pacchetti o repository speciali di Volo; se qualcosa è su GitHub, puoi usarlo nel tuo progetto. Questo è ciò che distingue Volo dalle applicazioni simili.
Volo è stato creato da James Burke, lo stesso James Burke che ha creato la famosissima libreria require.js.
Potrebbe non sorprenderti se Volo ha un flusso di lavoro molto apprezzato; si presuppone che si desideri utilizzare AMD appropriato per i file, oltre a fornire preimpostazioni su dove collocare i file.
è una cosa negativa? Non proprio - dovresti farlo comunque. Inoltre, puoi sovrascrivere i comandi se devi farlo.
Cominciamo quindi esaminando alcuni dei comandi di Volo.
Probabilmente userai il creare comando prima. Ho detto che Volo è profondamente radicato in GitHub, ma, cosa abbastanza interessante, Volo in realtà non usa GIT. Di solito vuoi solo un'istantanea di un repository, non la sua intera cronologia di commit; quindi Volo scarica solo i file del repository senza i dati GIT reali.
Il metodo più semplice per fare riferimento a un modello è semplicemente fornire il nome del repository. Ad esempio, se vuoi copiare un repository chiamato 'starterTemplate', puoi semplicemente digitare il seguente comando:
volo crea myApp starterTemplate
Supponendo che il repo sia il primo risultato restituito da GitHub, Volo scaricherà e "installerà" il template in una nuova directory chiamata myApp.
Questo è un po 'rischioso, specialmente se preferisci nominare i tuoi repository con titoli molto generici. Per fortuna, puoi specificare più dettagli per restringere il set di risultati. Il sistema di filtraggio è abbastanza avanzato quando si tratta di decodificare il tuo input. Fondamentalmente, puoi usare:
volo create appNome userName / repoName / [branch | tag]
Puoi anche omettere alcune informazioni. Ad esempio, puoi omettere il nome utente GitHub, facendo in modo che Volo cerchi il primo progetto con il nome e il ramo specificati.
In alternativa, è possibile specificare il nome utente ma omettere la versione / ramo e Volo scaricherà l'ultima versione con tag.
Se non vengono trovati tag, Volo ritorna al ramo principale.
Inoltre, non è necessario specificare una versione esatta. Digitando un'espressione come "> 1.0"dice a Volo di scaricare una versione maggiore di 1.0.
Ultimo ma non meno importante, non è necessario utilizzare un repo di Github; basta passare l'URL all'archivio zip che si desidera utilizzare come modello. Per copiare una cartella locale, puoi usare il seguente formato:
/ A / directory / percorso: locale
Quindi ci sono una varietà di opzioni che puoi usare per selezionare il repository desiderato, e puoi anche omettere il nome del repository per usare il modello predefinito di Volo.
Non sei sicuro di chi sia il proprietario di un repo popolare? Utilizzare il ricerca comando.
volo ricerca repoName
Usa la stessa ricerca GitHub come creare; così puoi essere sicuro che il primo repo nei tuoi risultati di ricerca sarà il repo che Volo scaricherà.
Il ricerca comando è solo per trovare un repository o recuperare le sue informazioni. Di conseguenza, manca alcune delle funzionalità trovate nel creare comando. Ad esempio, James ha creato alcuni modelli ufficiali che è possibile utilizzare, ma potresti non conoscere i loro nomi.
Esecuzione
volo ricerca volojs / templatemostra alcune buone opzioni da usare.
Non devi essere troppo preciso con i tuoi criteri di ricerca; Volo fa un lavoro decente per trovare quello che vuoi. È sorprendentemente veloce.
Se si desidera più informazioni su un repository, come numeri di versione o collegamenti, è possibile utilizzare il nome appropriato Informazioni comando. Uno dei risultati di volo ricerca volojs / template è un repository chiamato "volojs / create-responsive-template". È possibile recuperare ulteriori informazioni su questo repository digitando:
volo info volojs / create-responsive-template
Usando il creare, ricerca, e Informazioni comandi, possiamo presumere che abbiamo creato la nostra app. Allora, qual è il prossimo?
Successivamente, abbiamo bisogno di aggiungere dipendenze. Questo è abbastanza facile e utilizza le stesse opzioni di creare comando con alcune aggiunte. Oltre a essere in grado di specificare un utente GitHub, ramo / tag o URL per un file zip, il Inserisci comando ti consente di aggiungere "#"intallare un file specifico dal repository.P Molti repos tendono ad avere la libreria JaveScript che si desidera, ma è impacchettata insieme a demo e documentazione. Molto spesso, si desidera solo la libreria, e Inserisci il comando ti consente di farlo.
Facciamo finta di voler scaricare una libreria chiamata "foo.js". Puoi semplicemente digitare:
volo aggiungi utente / fooRepo / v1.5 # foo.js
Questo scarica l'intero file zip da GitHub, estrae solo il file foo.js file e lo aggiunge al tuo progetto. Questa funzione hashtag non è specifica per i nomi di file; puoi passare il nome di una cartella per aggiungere solo la cartella specificata al tuo progetto.
Prima ho accennato al fatto che Volo si aspetta che tu pratichino l'AMD corretta. Quindi se aggiungi un file JavaScript che non è compatibile AMD, Volo proverà a convertirlo per te. Il processo è piuttosto semplice.
Inizia chiedendo quali dipendenze utilizza il tuo file JavaScript.
È possibile passare i nomi delle dipendenze in un elenco separato da virgole oppure facoltativamente assegnare loro un nome di variabile. Ecco un esempio di cosa puoi digitare per un plugin jQuery:
jquery1.9 = jQuery, jQueryUI
Questo dice a Volo che la libreria specificata richiede il file chiamato jquery1.9 e passarlo sotto il nome della variabile jQuery. Quindi aggiungiamo una virgola per dichiarare la prossima dipendenza: jQueryUI.
Dopo aver completato la dichiarazione delle dipendenze, è possibile dichiarare ciò che si desidera esportare dallo script. Di solito non esporti nulla in un plugin jQuery; questo è gestito da jQuery stesso. Ma se hai una libreria JavaScript che ha bisogno di esportare qualcosa, devi semplicemente digitare il nome della variabile desiderata nel tuo script. È possibile utilizzare questa funzione di conversione al volo con il amdify comando:
volo amdify
Basta passare il nome file desiderato.
Puoi anche rinominare automaticamente un file scaricato. Ad esempio, potresti voler aggiungere un file chiamato jquery.pluginName.1.3.min.js, ma non è un file conveniente da consultare nei tuoi script. Puoi passare un nuovo nome come parametro finale al Inserisci comando, e Volo rinominerà il file.
Per riassumere, possiamo installare questo plugin pseudo jQuery da un repository digitando quanto segue:
volo aggiungi userName / RepoName / v1.3 # jquery.pluginName.1.3.min.js newName.js
Volo scaricherà il repository specificato, estrarrà solo il file specificato per il plug-in, ti chiederà come convertirlo come AMD compatibile e lo inserirà nel tuo progetto con il nuovo nome. È un sacco di controllo e automazione in un comando molto facile da usare.
Ora passiamo a Volofiles.
Volofiles ti consente di automatizzare le attività creando comandi di tipo macro. Ad esempio, gli utenti di CoffeeScript e SCSS possono eseguire manualmente i seguenti comandi per compilare i propri file:
caffè -c caffè-lib / -o lib / caffè -c app.coffee sass css / main.scss css / main.css
Questo è un sacco di comandi da eseguire ripetutamente. Naturalmente, è possibile aggiungere questi comandi a un file bash, ma automatizzare più operazioni più che probabilmente implica un file bash semi-complicato o più file bash. Con Volo, crei un file chiamato volofile. All'interno di questo file, si crea un oggetto JavaScript che contiene i comandi che si desidera eseguire. Quindi puoi semplicemente chiamarli come se fossero comandi nativi.
Ecco un esempio volofile utilizzando parametri comuni:
Accentsconagua
module.exports = 'hi': 'summary': 'Un comando per dire Hello', 'doc': 'Inserisci Doc Text qui o Carica un file', 'validate': function (namedArgs, arg1) if ( namedArgs.cancel == "true") return new Error ('Il parametro "cancel" è stato impostato'); , 'run': ['echo "Hello World"', 'echo "Come stai oggi?"'], 'nextCommand': ... Potresti quindi digitare volo -h per visualizzare questi comandi e il loro sommario. Entrando volo hi -h mostra ciò che è nel doc campo. Il convalidare la chiave è facoltativa e puoi usarla a scopo di test per uscire opzionalmente se c'è un problema. Ultimo ma non meno importante, abbiamo il correre proprietà, che contiene l'elenco di comandi da eseguire. È possibile inserire una stringa semplice o una serie di stringhe e Volo elaborerà ed eseguirà ciascuna di conseguenza.
Con il comando sopra, sarei in grado di digitare:
volo ciao
Per ottenere l'output, o:
volo hi cancel = true
Per attivare il Se istruzione e uscire con il messaggio di errore fornito. Questo è probabilmente il più semplice degli esempi e hai molte più opzioni disponibili quando crei i tuoi comandi.
Ho menzionato che Volo elabora ogni stringa nel file correre proprietà. L'esempio sopra riportato utilizza l'impostazione 'last-resort'. Volo cerca prima determinate caratteristiche nei tuoi comandi e esegue la stringa solo nel terminale standard se non è in grado di determinare ciò che desideri. Hai due opzioni prima, però, e sono nominate 'v' e 'n'.
v' e 'n'Parole chiaveQueste due parole chiave ti consentono di inserire funzionalità personalizzate nelle tue stringhe di esecuzione. Se è necessario leggere i file, eseguire processi o altre attività specifiche del sistema operativo, si desidera utilizzare il 'v' parola chiave. Basta scrivere il comando (ad es. rm file.js) funziona solo su sistemi operativi che supportano il comando specificato. Usando vI comandi, assicuri il supporto multipiattaforma del tuo volofile. Ad esempio, è possibile aggiungere la seguente stringa di esecuzione se si desidera copiare un file da una posizione a un'altra:
eseguire: 'v.copyFile file_one file_two'
Questo comando è multipiattaforma. Per vedere l'elenco completo di 'v'opzioni, dai un'occhiata al file sorgente. Puoi aggiungere parametri con uno spazio (come nel terminale) invece di usare parentesi.
Quindi abbiamo il n parola chiave, che associa ai moduli node.js eseguibili. Se si specifica un comando sotto il n parola chiave, Volo controlla se riesce a trovare l'eseguibile node.js nel privato del progetto corrente node_modules cartella e ricade nella cartella dei moduli node.js globali se non ne viene trovata una.
Node.js, o più specificamente NPM, ha una collezione molto ampia di strumenti di sviluppo di qualità creati da molte persone intelligenti e creative.
Volo sfrutta questa enorme risorsa permettendoti di integrare i loro eseguibili direttamente nei tuoi Volofile. James Burke ha persino creato un modello per creare i propri moduli node.js appositamente per Volo, ma ci arriveremo in un minuto.
Un esempio di utilizzo del n parola chiave è il modulo CoffeeScript. Se vuoi compilare una directory contenente i file CoffeeScript, potremmo scrivere il seguente comando:
'run': 'n.coffee -c coffee-lib / -o lib /'
Anche se CoffeeScript non è installato a livello globale, è possibile assicurarsi che venga eseguito su tutti i sistemi operativi dal locale node_modules cartella.
Ora puoi usare il modello di comando che ho menzionato (scarica qui, tra l'altro) per creare un comando Volo riutilizzabile da utilizzare in tutti i tuoi progetti. Ad esempio, se hai un modulo che esegue il backup della tua app, potresti volerlo includere in tutti i tuoi progetti.
Creare un modulo NPM standard che esporti le proprietà di cui sopra (
sommario,correreecc) e richiedono il modulo nel tuo Volofile.
Quindi, con il pacchetto aggiunto a NPM, puoi semplicemente digitare:
npm install commandName
E nel tuo volofile, digita semplicemente:
module.exports = 'commandName': require ('node_modules / commandName / index'); Dove index.js è il nome della tua estensione. Poiché il tuo file esporta le proprietà necessarie, le opzioni verranno direttamente iniettate nel tuo volofile con il nome del comando specificato. Non la chiamerei davvero una funzione personalizzata (è JavaScript standard), ma è comunque bello sapere che hai questa opzione.
Ora, con la teoria tolta, esaminiamo un esempio del mondo reale. Costruiremo un'applicazione usando Volo.
Volo è un pacchetto NPM, quindi l'installazione è semplice come:
(sudo) npm installazione -g volo
Per questo articolo, ho pensato di creare una piccola pagina web per generare una mappa della tua zona, mostrando chi sono i sindaci di FourSquare dei tuoi siti preferiti. Non è un'idea incredibile e profonda, ma metterà a dura prova Volo.
Quindi, per iniziare, abbiamo bisogno di un repo. Puoi trovare una serie di modelli di avvio, creati appositamente per Volo, semplicemente cercando GitHub. Il modello predefinito viene fornito con le semplici necessità: un semplice scheletro HTML e una cartella JavaScript con una configurazione di barebone AMD.
Si ottiene anche un volofile con un comando build per compilare i file JavaScript e CSS del progetto.
Non userò il modello standard, poiché mi piacerebbe avere qualche altra risorsa. Dopo una rapida ricerca su GitHub, ho trovato un modello ufficiale che contiene i valori predefiniti, il framework bootstrap e altre risorse.
Quindi, per creare il nostro nuovo progetto (che ho chiamato 'turf'), puoi semplicemente digitare quanto segue in una finestra di terminale:
volo crea turf volojs / crea-responsive-template cd turf
Questo crea la cartella del progetto e scarica un'istantanea del repository specificato. Successivamente, per scaricare altre risorse. Useremo ovviamente jQuery, quindi aggiungiamolo:
volo aggiungi jquery
Abbiamo anche bisogno di un modo per visualizzare una mappa sulla pagina. Mi viene in mente Google Maps, quindi useremo una libreria chiamata gmaps. Il file JavaScript contiene l'intera libreria; quindi, non abbiamo davvero bisogno del resto del repository. Inoltre, è possibile vedere che la libreria è memorizzata all'interno di una variabile denominata GMaps, e richiede l'API di Google Maps come dipendenza.
C'è un piccolo problema con questo: l'API di Google Maps non è compatibile con AMD ed è una libreria asincrona.
Quando carichi il singolo URL, continua a caricare altre risorse da solo. Questo rende l'uso di standard require.js un problema, ma c'è un plugin che gestisce questa esatta situazione. Fa parte di un repository chiamato "requirejs-plugins", ma ancora una volta, non abbiamo bisogno dell'intero repository. Quindi, digita quanto segue nella finestra del terminale:
volo aggiungi requirejs-plugins # src / async.js
Con il plugin async, possiamo caricare le nostre speciali dipendenze asincrone.
Abbiamo due opzioni per installare il plugin vero e proprio:
Ti mostrerò come utilizzare entrambe le opzioni. Per convertire il file, aggiungilo. Volo rileva automaticamente che il file deve essere convertito:
volo aggiungi HPNeo / gmaps # gmaps.js
Volo è stato creato con un rapporto molto speciale con GitHub; comprende repository GIT, nonché rami e tag.
Secondo la pagina Github del progetto, si basa sull'API di google maps. C'è un piccolo problema con l'inserimento dell'URL perché contiene caratteri non supportati (il segno di uguale). Quindi usiamo un segnaposto; basta digitare Google Maps e premi invio. Successivamente, dobbiamo specificare cosa vogliamo esportare. genere GMaps (con le due maiuscole, questo è il nome della variabile) e premi invio. Volo finirà di convertirlo e aggiungerlo al js / lib cartella.
Perché il js / lib cartella? Se dai un'occhiata al package.json file nella radice del tuo progetto, vedrai una voce chiamata baseurl sotto il amd proprietà. Questo dice a Volo dove mettere tutti i file JavaScript scaricati. C'è in realtà un certo numero di luoghi in cui Volo controlla per decidere dove mettere le cose:
basedir proprietà sotto una voce denominata Volo baseurl proprietà di nuovo sotto Volo baseurl sotto amd come noi abbiamo quijs cartella nella directory correntescript cartella nella directory correnteSe nessuna di queste posizioni esiste, Volo inserisce il file nella directory corrente.
Con il modulo installato, dobbiamo ancora sostituire il segnaposto che abbiamo creato per l'API di Google Maps. Apri il www / js / lib / gmaps.js file e sostituire il segnaposto nella prima (o seconda) riga con quanto segue:
async http:!? //maps.google.com/maps/api/js sensore = false & biblioteche = posti
Ciò indica a Volo di includere il plug-in async e di passargli l'URL dell'API di Google Maps.
Il modulo GMaps è ora completamente installato, ma richiede l'inserimento di specifiche coordinate di longitudine e latitudine, qualcosa che la maggior parte degli utenti non conoscerà. Quindi dovremmo avere un qualche tipo di plugin di completamento automatico che converta i nomi di posizione in coordinate.
Dopo un'altra veloce ricerca su Github, ho trovato un plugin jQuery chiamato geocomplete da ubilabs. Anch'esso non è compatibile con AMD, ma useremo la funzione shim di require.js. Nel terminale digita il seguente comando:
volo add -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
Il amdoff opzione impedisce a Volo di convertire il file, e il parametro finale rinomina il file da jquery.geocomplete.js a geocomplete.js. Questo non è obbligatorio, ma rende la referenziazione più conveniente.
Ora apri il www / js / app.js file e sostituire la dichiarazione di configurazione require.js in alto:
requirejs.config (baseUrl: 'js / lib', percorsi: app: '... / app', shim: 'geocomplete': deps: ['jquery', 'async! http: //maps.google .com / maps / api / js? sensor = false & libraries = places ']);
Solo per scorrere le impostazioni che erano già lì, baseurl dice require.js dove cercare i file relativi e paths.app opzione dice require.js che se il nome di un modulo ha un riferimento a una posizione chiamata "app", allora per sostituire con ciò che è specificato ('... / app').
Il shim la sezione è ciò che ho aggiunto al file. Indica a require.js di caricare prima jQuery e l'API di Google Maps quando qualcuno carica un file chiamato geocomplete. È possibile impostare facoltativamente un'altra proprietà chiamata esportazioni, il nome della variabile da esportare. Non è necessario esportare nulla perché questo è un plugin e si collega all'oggetto jQuery.
A questo punto, abbiamo i file necessari per visualizzare la mappa e recuperare le coordinate necessarie. Non abbiamo scritto alcun codice, ma abbiamo tutte le dipendenze.
Per iniziare la prototipazione della nostra app, dobbiamo scrivere un po 'di HTML. Apri il index.html file e rimuovi tutto all'interno dei tag del corpo tranne il element at the bottom. You should be left with a file like the following:
Successivamente, aggiungi un campo di immissione del testo per la casella di ricerca e un segnaposto per la mappa attuale. La tua nuova area del corpo dovrebbe assomigliare a questo:
È un po 'più delle nozioni di base in modo che sia conforme alle regole CSS di bootstrap. Ho dato al testo un ID di ricerca e la mappa un ID di carta geografica. Ora apriamo il file JavaScript.
Volo è un'applicazione che aiuta gli sviluppatori front-end automatizzando i loro processi.
Lo romperò per quelli di voi che sono nuovi a require.js. La ragione principale per usare qualcosa come require.js è assicurarsi che le dipendenze degli script siano caricate quando, e solo quando, il tuo script ne ha effettivamente bisogno. Questo aumenta la velocità generale del tuo sito e semplifica i tuoi file HTML (non hai bisogno di fare riferimento a molti script).
È possibile vedere lo script nella parte inferiore del file HTML punta alla libreria require.js e ha anche a Dati-principale attributo che viene eseguito automaticamente quando require.js è pronto.
Se apri js / app.js, la nostra sezione di configurazione modificata e una dichiarazione di richiesta in fondo. Si noti che non è necessario l'estensione del file. Nel file indice, abbiamo fatto riferimento js / app (senza il .js), e qui carica App / main.
Normalmente, un riferimento a App / main si assocerebbe ad un file chiamato main.js all'interno di una cartella chiamata App (tutto relativo al js / lib cartella). Ma ricorda nella configurazione, abbiamo detto qualsiasi riferimento a un luogo chiamato App, dovrebbe essere sostituito con ... / app. Invece di cercare js / lib / app / main.js, require.js recupererà js / app / main.js.
Avanti, aperto js / app / main.js, rimuovi tutto e digita quanto segue:
define (['jquery', 'gmaps', 'geocomplete'], function ($, gmaps) $ (document) .ready (function () $ ("# search"). geocomplete ();); ); Il primo parametro è una matrice delle nostre dipendenze. Il secondo è una funzione con i nomi dei parametri per jQuery ($) e GMaps (Gmaps). Ricorda che il geocomplete è un plugin jQuery, quindi non c'è motivo di dargli un parametro corrispondente ...
La funzione è passata mentre il secondo parametro viene eseguito dopo il caricamento delle dipendenze.
All'interno di questa funzione, eseguiamo il geocomplete () metodo quando il documento è pronto.
È ora possibile aprire la pagina nel browser e, se tutto è andato bene, la casella di testo dovrebbe indicare "Inserisci una posizione". Inizia a digitare e vedrai alcuni risultati.
Successivamente, dobbiamo gestire l'evento quando viene trovata una corrispondenza, cioè quando l'utente preme il tasto Invio sul nome di un luogo. Questi eventi sono: geocode: risultato e il geocode: Errore. Aggiungi il codice per gestire questi eventi:
$ (document) .ready (function () $ ("# search"). geocomplete () .bind ("geocode: result", function (evento, risultato) // On Result) .bind ("geocode: errore ", funzione (evento, risultato) avviso (" Posizione non trovata "););); Il prossimo passo è recuperare latitudine e longitudine e generare una nuova mappa. Il lat / long sono memorizzati nelle proprietà named geometry.location.hb e geometry.location.ib, rispettivamente. Aggiungi il seguente codice all'interno del geocode: risultato handler:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var map = new gmaps (div: "#map", lat: lat, lng: lng, height: '380px');
Memorizziamo le coordinate e carichiamo una nuova mappa. Creare una mappa è semplice: passiamo l'ID del contenitore insieme alle coordinate e all'altezza.
Ora dovresti essere in grado di cercare e visualizzare una mappa. Successivamente, dobbiamo interfacciarci con Foursquare e mostrare i "sindaci" della tua città.
Per prima cosa abbiamo bisogno di un'interfaccia per l'API di foursquare. Per risparmiare tempo e per rimanere in tema, ho creato un repository che possiamo clonare. Quindi, nella finestra del terminale, digita:
git clone https://github.com/gmanricks/MayorAPI www / foursquare
Questo scarica il repository e lo inserisce in una cartella denominata foursquare sotto il www elenco.
Avanti, aperto foursquare.php e inserisci il tuo client-id e il tuo client-secret nelle costanti della classe. Se non hai già queste informazioni, puoi ottenerle da Foursquare registrando un'app.
L'altro file nel repository (data.php) recupera le coordinate della mappa tramite i parametri GET e restituisce un oggetto JSON. Quindi per aggiungere i sindaci alla mappa, dobbiamo riscrivere il geocomplete: risultato gestore di eventi:
.bind ("geocode: result", function (evento, risultato) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, funzione (d) var map = new gmaps (div:" #map ", lat: lat, lng: lng, height: '380px'); var places = JSON .parse (d); if (places.error) alert ("Il limite di velocità è stato colpito"); else for (indice var in posti) var place = places [index]; if (place.mayor. foto) var html = ''+''+'
'+''+''+ place.mayor.name +''+''; map.drawOverlay (lat: place.lat, lng: place.lng, content: html); ); ) Per prima cosa definiamo il lat e lng variabili, ma invece di creare immediatamente la mappa, attendiamo che la richiesta Ajax sia completata. Stiamo effettuando circa undici chiamate API dietro le quinte, quindi potrebbero essere necessari dieci o quindici secondi.
Successivamente, ci assicuriamo che il limite di velocità non sia stato raggiunto e avvisa l'utente in modo appropriato. Infine, passiamo in rassegna i risultati, aggiungendo ognuno alla mappa usando un comando dalla libreria GMaps.
Ora puoi aprire la pagina e provarla; tutto dovrebbe funzionare! Con un po 'di stile e un po' di design, potrebbe sembrare qualcosa del genere:
La nostra app è completa e l'ultimo passo è quello di ottimizzarlo. Cancelliamo prima i file che non usiamo. Nel js / app / cartella, è possibile rimuovere tutto tranne il main.js file. Nel js / lib / cartella, rimuovere i file denominati appCache.js e network.js. Inoltre non hai bisogno del manifest.webapp file, ma potresti mantenerlo se lo desideri.
Ora apri il volofile, e puoi vedere che il modello è dotato di un comando di compilazione piuttosto complicato per l'ottimizzazione e l'impostazione dei file JavaScript e CSS del progetto. Non abbiamo bisogno di uno script così elaborato, quindi elimina tutto dal file e sostituiscilo con quanto segue:
module.exports = 'build': 'summary': 'Comando per compilare i file sorgente', 'esegui': ['v.rm www-built', 'v.copyDir www www-built', 'v. rm www-built / js ',' node tools / r.js -o baseUrl = www / js / lib paths.app = ... / app paths.requireLib = richiede nome = 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 è un omni-strumento: ottieni ciò che ci metti.
Questo è molto più semplice. Qui, creiamo un comando chiamato costruire che rimuove la precedente folde costruita se esiste. Quindi copia l'intero www cartella come base per la nostra versione compilata. Successivamente, eliminiamo il js directory (lo sostituiremo con la versione ottimizzata).
Quindi eseguiamo l'ottimizzatore require.js per compilare i file JavaScript in un singolo file. Si può notare che rinomina il prodotto finale a require.js; questo è un po 'un "hack" perché non è proprio la libreria require.js. Ma dal momento che il nostro file HTML ha un riferimento a require.js già, è più facile rinominare il file Javascript piuttosto che analizzare tutti i file HTML e modificare i riferimenti di script.
Una volta completato il comando, rimuoviamo la cartella CSS (di nuovo per sostituirla con la versione ottimizzata). E, ultimo ma non meno importante, eseguiamo di nuovo l'ottimizzatore require.js, questa volta per il CSS.
Ora puoi eseguire costruire volo dalla finestra del terminale e Volo eseguirà questa serie di comandi.
Nel tuo browser, puoi navigare verso www-built cartella al posto di www cartella per assicurarsi che funzioni ancora. Sul mio computer, la costruzione del progetto taglia a metà le dimensioni del file, da poco meno di un megabyte a ~ 400kb. Probabilmente puoi renderlo ancora più piccolo se si minimizza il CSS.
In questo articolo, ti ho insegnato la sintassi di Volo e abbiamo creato un'applicazione di esempio. Abbiamo imparato a utilizzare Volo per creare un progetto, aggiungere dipendenze, aggiungere comandi personalizzati per automatizzare attività comuni e ottimizzare un intero progetto.
Per riassumere, Volo è un omni-strumento: ottieni ciò che ci metti. Hai pochi ma potenti comandi, ma il vero potere di Volo deriva dalla sua incredibile estensibilità e, in definitiva, dalla sua comunità.
Allora, cosa ne pensi di Volo? Creerai comandi Volo personalizzati? Lascia un commento con le t
'+'