In der sich ständig verändernden Welt der mobilen Anwendungs-Entwicklung hat die Entwicklung von Progressive Web-Anwendungen (PWAs) den Weg für neue Querplattform-Runzeitumgebungen geebnet. Diese Runzeitumgebungen ermöglichen es, webbasierte Anwendungen in App-Stores ohne sich ausschließlich auf native code. zu verlassen, vorzustellen. Eine solche Technologie, die dies erleichtert, ist CapacitorJS, die es Entwicklern ermöglicht, eine einfache Website als Anwendung auf Android, iOS und im Web mit einer einzigen JavaScript-Codebasis zu deployen. Diese Vorgehensweise reduziert die Entwicklungskosten erheblich und erhöht die Kodiergeschwindigkeit.
In diesem Leitfaden wird sich auf die Erstellung einer Anwendung mit reinem JavaScript ohne zusätzliche Frameworks konzentriert. Trotz der Herausforderungen bei der Suche nach Ressourcen für die Entwicklung von reinen JavaScript-Anwendungen im Jahr 2021, bieten wir Ihnen eine umfassende Anleitung zum Aufbau Ihrer Anwendung und zur Nutzung von native Plugins mit CapacitorJS.
‣ Voraussetzungen
Bevor wir beginnen, stellen Sie sicher, dass Sie die folgenden Tools installiert haben:
- Node.js (v14.16.1) oder höher
- NPM (v7.6.2) oder höher
- Android Studio für die Entwicklung von Android-Anwendungen
- Xcode für die Entwicklung von iOS-Anwendungen (nur macOS)
HinweisiOS-App-Entwicklung ist nur auf einem macOS-Gerät möglich.
‣ Einrichten Ihres Capacitor-Projekts
Um ein Capacitor-Anwendungsprojekt zu erstellen, navigieren Sie zu Ihrem gewünschten Verzeichnis und führen Sie in Ihrem Terminal den folgenden Befehl aus:
npm init @capacitor/appFolgen Sie den Anweisungen, um das Paket zu installieren und Ihr Projekt einzurichten. Mit Capacitor v3 sollte Ihr Projektverzeichnis wie folgt aussehen:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdMit der ersten Einrichtung abgeschlossen, sind Sie bereit, weiterzumachen.
‣ Projektstruktur
Wir werden Vite verwenden, um unsere JavaScript-Dateien zu bündeln, also sollten wir unsere Projektstruktur entsprechend anpassen:
- Erstellen ein neues Verzeichnis
srcin dem Hauptverzeichnis. - Erstellen eine neue Skriptdatei
index.jsinsrc/. - Erstellen die Vite-Konfigurationsdatei
vite.config.jsim Hauptverzeichnis. - Entfernen den
capacitor-welcome.jsDatei auswww/js/.
Ihr neues Verzeichnisstruktur sollte folgende Ähnlichkeit haben:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Anpassen an Pure JavaScript
Lassen Sie uns einige Dateien anpassen, um mit reinem JavaScript zu arbeiten:
www/index.html
- Entfernen Sie die Skriptimporte für Ionic PWA Elemente Wenn Sie die App nicht als PWA veröffentlichen:
<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>-
Löschen Sie das
<capacitor-welcome>HTML-Element aus dem Body. -
Aktualisieren Sie die Skript-Importierung von
capacitor.jsaufjs/main.js. Dies wird unser gebundelter JavaScript-File sein. -
Entfernen Sie das
js/capacitor-welcome.jsImport. Ihrindex.htmlist jetzt bereit.
vite.config.js
Um unsere Node.js-Module zu bündeln, ViteWir benötigen eine Konfigurationsdatei, die den Ausgabebereich für unser gebundenes Skript spezifiziert. Die folgende Konfiguration wird das File src/index.js und bündelt es für die Produktion als www/js/main.js:
import { defineConfig } from 'vite';
import path from 'node:path';
export default defineConfig({
build: {
outDir: path.resolve(__dirname, 'www'),
rollupOptions: {
input: './src/index.js',
output: {
format: 'es',
file: path.resolve(__dirname, 'www/js/main.js')
}
}
}
});capacitor.config.json
In der capacitor.config.json Datei, suchen Sie nach der "bundledWebRuntime": true Eigenschaft und ändern Sie sie in false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir Vite für diesen Zweck verwenden können.
Mit diesen Änderungen ist die grundlegende Einrichtung Ihrer Capacitor-Anwendung abgeschlossen, und Sie sind bereit, Ihre App mit reinem JavaScript zu entwickeln.
‣ Die Entwicklung Ihrer App
Jetzt, dass der Boden bereitet ist, können Sie mit der Implementierung Ihrer Anwendung logik in der src/index.js Datei beginnen. Hier können Sie die notwendigen Node.js-Module importieren, die Funktionalität Ihrer App definieren und mit den native Plugins von Capacitor interagieren.
Denken Sie daran, die Vite-Build-Kommandozeile auszuführen, um Ihre JavaScript-Dateien zu bündeln, sobald Sie Änderungen vornehmen:
vite buildDiese Kommandozeile generiert das main.js Datei in Ihrem www/js Verzeichnis, das Ihre index.html Datei verweist.
‣ Testen und Debuggen
Capacitor bietet eine bequeme Möglichkeit, Ihre Anwendung auf verschiedenen Plattformen zu testen. Verwenden Sie die folgenden Kommandozeilen, um Ihre App in der Entwicklungsumgebung der jeweiligen Plattform zu öffnen:
Für Android:
npx cap add android
npx cap open androidFür iOS (nur macOS):
npx cap add ios
npx cap open iosFür Web/PWA:
npx cap serveDiese Kommandozeilen ermöglichen Ihnen, Ihre Anwendung in Android Studio, Xcode oder Ihrem Webbrowser auszuführen, wo Sie testen und debuggen können, wie nötig.
‣ Fazit
Mit CapacitorJS entwickeln Sie mit reinem JavaScript cross-plattformfähige Anwendungen zu einem kosteneffizienten und effizienten Weg, um Apps für mehrere Plattformen mit einer einzigen Codebasis zu erstellen. Durch die Befolgung dieser Anleitung haben Sie Ihr Projekt eingerichtet, es umgestellt, um Vite zu verwenden, und Ihr App für die Entwicklung vorbereitet. Mit dieser Grundlage sind Sie auf dem richtigen Weg, eine robuste und vielseitige Anwendung zu erstellen.
Denken Sie daran, gründlich auf allen Plattformen zu testen und die nativen Plugins von Capacitor zu nutzen, um die Funktionalität Ihrer App zu verbessern. Viel Spaß beim Programmieren!
