Pflege einer PhoneGap Hybrid / Web App Codebase

Ich hatte kürzlich dieselbe Frage. Ich konnte nicht wirklich viel online diesbezüglich finden, also entschied ich mich, tiefer in Grunt, Node und Git einzutauchen.

Grunt und Knoten

Im Stammordner meiner Cordova-Projekte (neben den WWW-, Plattform-, Merges- und Plugins-Ordnern) habe ich ein Grunt-Projekt. Ich speichere modulare JavaScript-Dateien und CSS-Dateien, die plattformabhängig sein können oder nicht, in einem src-Ordner im Stammverzeichnis des Cordova-Projekts. Dieses grunt-Projekt erstellt die im src-Ordner gespeicherten JavaScript- und CSS-Dateien und platziert die resultierenden Dateien entsprechend im Ordner www oder merges.

Ich habe sogar eine Grunt-Aufgabe geschrieben, die einen Produktionsaufbau der App durch Optimierung und Minimierung von css-, javascript- und html-Templates ermöglicht und dann die Cordova-Plattform-Projekte neu erstellt, um diese Produktionsdateien aufzunehmen.

Weil es in JavaScript kein #IF_DEF gibt, muss ich Grunt (wie oben erwähnt) verwenden, um das JavaScript für jede Plattform zu erstellen. Ich moduliere fast alle JavaScript-Funktionen nach Plattform. Wenn es für diese Funktion keine Plattformunterschiede gibt (keine nativen Hooks), brauche ich nur eine Datei. Wenn es Unterschiede gibt, muss ich eine separate Datei für jede Plattform für diese Funktion erstellen. Zum Beispiel unterscheiden sich meine Funktionen Cordova onDeviceReady und onResume normalerweise von Plattform zu Plattform. Ich erstelle Dateien namens

In der Datei package.json beschreibe ich die "Funktionen", die ich in meiner App haben möchte. CordovaEvents ist ein Beispiel für ein Feature.

Ich unterstütze auch "Argumente". Ich benutze den gleichen Ansatz oben in den Dateinamen der modularen Dateien. Ein Argument könnte so aussehen

In diesem Fall unterscheidet sich der Code, der in einer Produktionsanwendung benötigt wird, vom Nicht-Produktionscode. Ich kann dieses Argument (oder eine Liste von Argumenten) einfach während des Erstellungsprozesses übergeben und die richtigen Dateien werden aufgenommen und erstellt. Ich denke, das geht am besten auf Ihre Frage ein, wenn es einen Ansatz zur Pflege einer Codebasis gibt, die sich an unterschiedliche Plattformen und Anforderungen anpassen kann. Die Anforderungen sind die Feature-Namen und Argumente. Das Argument kann alles sein, was Sie wollen, vielleicht ein Plugin oder ein anderes Plugin.

Ich beschreibe auch die Plattformen, die ich unterstützen möchte ("iOS", "Android" und "Desktop"). Grunt verarbeitet jede Plattform in einer MultiTask und betrachtet dann die Funktionen, die ich unterstützen möchte. Es wird versucht, eine Datei namens feature-platform.js zu finden. Wenn es diese Datei nicht finden kann, versucht es einfach nach feature.js zu suchen. Nachdem ich alle für die Plattform benötigten Funktionen zusammengefügt habe, wird die Datei in den Merges-Ordner für iOS oder Android kopiert. Normalerweise funktionieren alle Dateien im WWW-Ordner im Stammprojekt auf einem Desktop, da keine nativen Cordova-Hooks vorhanden sind. Dies ermöglicht es mir, in Chrome zu debuggen. Alle Dateien, die native Hooks enthalten, werden im Merges-Ordner gespeichert. Sobald das Cordova-Projekt für die jeweilige Plattform erstellt wurde, kann der Code in einem Gerätesimulator getestet werden.

Wenn Sie Grunt neu sind, würde ich Ihnen dringend raten, einen Leitfaden für die ersten Schritte zu lesen.

Ссылка

Git

Ich habe auch Git benutzt, um meinen Code zu versionieren. Ich habe SourceTree verwendet, um das Git-Repository im Stammordner meines Cordova-Projekts zu erstellen, und habe ein Remote-Repository auf meinem Mac-Mini-Server, auf das ich auch meine Commits übertragen kann. Dies ermöglicht uns, eine Sicherungskopie des Codes zu erstellen, und macht es so, dass mein Team auch außerhalb des Bandes an dem Code arbeiten kann.

I Git ignoriert die folgenden Ordner:

• node_module
• Plugins
• Plattformen
• Plugins

Alle anderen Dateien und Ordner, die im Stammverzeichnis meines Cordova-Projekts enthalten sind, werden versioniert. Ich habe den folgenden Link als Referenz verwendet, um meine Git-Strategie für Cordova zu definieren:

Ссылка

Ich brauchte nicht über Nacht, um all das auszuprobieren, tatsächlich dauerte es etwas mehr als zwei Monate. Ich hoffe, meine Antwort kann Server als Leitfaden für Sie und andere dienen, um Ihre Bedenken zu adressieren, die Sie in Ihrem ersten Beitrag erwähnt haben.

Ich benutze gruntjs, javascript, jade, bower und phonegap, um hybride Webanwendungen und phonegap mobile Anwendungen zu erstellen. Nach einigen Nachforschungen entschied ich mich, die Jade-Template-Sprache für die Erstellung meiner HTML- und JavaScript-Dateien zu verwenden. Das ist mein Setup.

}

Jetzt Erklärung

Verwenden Sie die Aufgabe gruntjs setPhonegap , um zwischen phonegap build und normalem Build der Webanwendung zu unterscheiden. Task setPhonegap set isPhonegapBuild config-Eigenschaft, diese Eigenschaft wiederum wird von jade config-Objekt verwendet. Dann kann ich " if phonegap " -Anweisungen in Jade-Dateien verwenden.

Ich habe folgende Zeile in meiner Jade-Layout-Datei

mainJavascript.jade

So habe ich folgende Funktionen

• Meine Webanwendung enthält keine phonegap-bezogenen Skripte oder HTML
• Ich kann Jade-Layouts (Master Page) verwenden, um meine Dateien sehr einfach zu machen.
• Hinzufügen von neuem Javascript zu jeder Seite oder Ändern jedes HTML für jede Seite in der Anwendung sehr einfach.

Beachten Sie, dass phonegap den www-Ordner für seine Build-Skripte benötigt, daher erstelle ich folgende Verzeichnisstruktur.

Ich ignoriere www / * und dist / * in meiner Quellcodeverwaltung. Ich arbeite nur mit Src Jade und Javascript Dateien. Fügen Sie diese Einstellung zu Bower hinzu, ich glaube, dass es eine gute Wahl ist.