Zum Hauptinhalt springen

Wie man Abhängigkeiten in Capacitor-Plugins hinzufüt

Lernen Sie, die Abhängigkeitsverwaltung in Capacitor-Plugins über Plattformen zu optimieren, mit praktischen Schritten und besten Praktiken.

Martin Donadieu

Martin Donadieu

Content-Marketing-Manager

Wie man Abhängigkeiten in Capacitor-Plugins hinzufüt

Zu __CAPGO_KEEP_0__ hinzufüten Capacitor Plugins können sich überwältigend anfühlen, aber es ist einfacher, wenn man sie in klare Schritte aufteilt. Hier ist, was du wissen musst:

  1. Verstehe die Werkzeuge:

    • JavaScript: Verwende npm um Abhängigkeiten zu verwalten.
    • iOS: Verwende CocoaPods oder Swift Package Manager (SPM).
    • Android: Verwende Gradle für die Abhängigkeitsverwaltung.
  2. Konfigurieren Sie Ihre Entwicklungsumgebung:

  3. Starten Sie Ihr Capacitor-Plugin-Projekt:

    • Verwenden Sie npm init @capacitor/plugin um ein neues Plugin zu erstellen.
  4. JavaScript-Abhängigkeiten hinzufügen:

    • Verwenden Sie npm install für Produktions- und Entwicklungszuweisungen.
    • Aktualisieren Sie package.json um Peer-Abhängigkeiten wie @capacitor/core.
  5. Plattform-spezifische Abhängigkeiten:

    • iOS: Konfigurieren Sie CocoaPods oder SPM mit Bibliotheken wie Alamofire oder SwiftyJSON.
    • Android: Verwenden Sie Gradle, um Abhängigkeiten wie Gson oder AppCompat hinzuzufügen.
  6. Optimieren Sie die Leistung:

    • Pins setzen, Abhängigkeiten überprüfen und Konflikte lösen, um Stabilität sicherzustellen.
  7. Verwenden Sie Werkzeuge wie Capgo zur Live-aktualisierung:

    • Pushen Sie Updates sofort ohne App-Store-Bewertungen.

Rapide Vergleich der Werkzeuge:

Plattform Werkzeug Beispielhafte Abhängigkeit
JavaScript npm npm install lodash --save
iOS CocoaPods/SPM pod 'Alamofire', '~> 5.6.4'
Android Gradle implementation 'com.google.code.gson:gson:2.10.1'

Warum es wichtig ist: Effektive Verwaltung von Abhängigkeiten sichert die reibungslose Funktion Ihres Plugins auf allen Plattformen, spart Zeit und vermeidet Fehler. Lassen Sie uns tiefer in die Schritte eintauchen.

Wie man ein Capacitor Plugin für iOS/Android erstellt

Capacitor Framework Dokumentationswebsite

Entwicklungsumgebung einrichten

Vorbereiten Sie Ihre Konfiguration mit den erforderlichen Werkzeugen, um Capacitor-Plugin Abhängigkeiten effektiv zu handhaben.

Erforderliche Entwicklungswerkzeuge

Hier ist eine Liste der erforderlichen Werkzeuge:

Werkzeug Version Zweck
Node.js 16.0.0+ JavaScript-Umgebung zum Ausführen von Skripten
npm 8.0.0+ Paketverwaltung
Xcode 14.0+ iOS-Entwicklung (nur Mac)
Android Studio Electric Eel+ Android-Entwicklung
CocoaPods 1.11.0+ iOS-Abhängigkeitsverwaltung
JDK 11+ Android-Build-Tools

Erstellung eines neuen Plugins

Verwenden Sie die Capacitor CLI zur Starten Ihres Plugin-Projekts. Dies umfasst die Einrichtung von Plattformen und die Namensgebung Ihres Plugins im umgekehrten Domänenformat (z.B. com.mycompany.plugin):

  1. Führen Sie den folgenden Befehl aus:
    npm init @capacitor/plugin
  2. Wählen Sie Ihre Zielplattformen (iOS/Android).
  3. Zuweisen Sie einem Namen für Ihren Plugin im rückwärts-domänen-Format.

Projekt-Einrichtungs-Schritte

  1. Aktualisieren package.json

    Ändern Sie Ihren package.json um den folgenden zu enthalten:

    {
      "capacitor": {
        "ios": {
          "src": "ios"
        },
        "android": {
          "src": "android"
        }
      },
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
      }
    }
  2. Plattform-spezifische Einrichtung

    • Für iOS, stellen Sie sicher, dass Ihr Podfile Folgendes enthält:

      platform :ios, '13.0'
      use_frameworks!
    • Für Android, Ihren build.gradle enthält:

      android {
          compileSdkVersion 33
          defaultConfig {
              minSdkVersion 22
          }
      }
  3. Umgebung variablen einrichten

    Konfigurieren Sie die folgenden Umgebungsvariablen für Ihre Entwicklungstools:

    Variablenname Zweck Beispielwert
    ANDROID_HOME Android-SDK-Ort /Users/username/Library/Android/sdk
    JAVA_HOME JDK-Installationspfad /Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home
    XCODE_SELECT Xcode-Befehlszeilenwerkzeuge /Applications/Xcode.app/Contents/Developer

Einmal Ihr Projekt eingerichtet ist, sind Sie bereit, sich auf die Verwaltung von JavaScript-Abhängigkeiten zu konzentrieren.

JavaScript-Abhängigkeiten

Die effektive Verwaltung von JavaScript-Abhängigkeiten ist entscheidend für die Gewährleistung einer stabilen Plugin-Leistung.

npm Paketinstallation

npm

Um Abhängigkeiten zu installieren, verwenden Sie die folgenden Befehle:

# Add a production dependency
npm install lodash --save

# Add a development dependency
npm install @types/lodash --save-dev

Stellen Sie sicher, dass Sie die Abhängigkeiten in Ihrem Projekt manuell einbeziehen. package.json Testen Sie alle Abhängigkeiten, um die Kompatibilität auf beiden Web- und Native-Plattformen zu bestätigen.

Verwalten Sie package.json

Hier ist ein Beispiel package.json Konfiguration:

{
  "name": "my-capacitor-plugin",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.195",
    "@capacitor/core": "^5.0.0"
  },
  "peerDependencies": {
    "@capacitor/core": "^5.0.0"
  }
}

Um Konsistenz zu gewährleisten, passen Sie die Versionsnummern der Abhängigkeiten entsprechend an:

Abhängigkeits-Typ Beispiel Verwendung
Exakt “5.0.0” Für kritische Abhängigkeiten, die eine bestimmte Version erfordern
Caret “^5.0.0” Ermöglicht kleine Updates und Patches
Tilde “~5.0.0” Beschränkt Updates auf Patches nur

Verwendung von JavaScript-Bibliotheken

Wenn Sie Bibliotheken importieren, konzentrieren Sie sich darauf, den Bundle-Größe zu reduzieren:

// Import only the required function
import { isEqual } from 'lodash';

export class MyPlugin {
  async compare(options: { value1: any, value2: any }): Promise<boolean> {
    return isEqual(options.value1, options.value2);
  }
}

Stellen Sie außerdem sicher, dass Sie eine ordnungsgemäße Fehlerbehandlung und Typüberprüfung durchführen:

import { Plugin } from '@capacitor/core';
import { validate } from 'your-validation-library';

@Plugin({
  name: 'MyPlugin',
  platforms: ['web', 'ios', 'android']
})
export class MyPlugin {
  async validateData(data: unknown): Promise<void> {
    try {
      if (!validate(data)) {
        throw new Error('Invalid data format');
      }
      // Continue processing if valid
    } catch (error) {
      throw new Error(`Validation failed: ${error.message}`);
    }
  }
}

Als Nächstes erfahren Sie, wie Sie Plattform-spezifische Abhängigkeiten für iOS handhaben.

iOS-Abhängigkeiten

Diese Abschnitt erklärt, wie Sie native iOS-Abhängigkeiten in Capacitor-Pluginsverwalten. Sobald Sie Ihre JavaScript-Abhängigkeiten eingerichtet haben, ist der nächste Schritt die Handhabung von native iOS-Abhängigkeiten.

CocoaPods Einstellung

CocoaPods

Beginnen Sie mit der Initialisierung von CocoaPods in Ihrem iOS-Verzeichnis:

cd ios
pod init

Dann aktualisieren Sie Ihr Plugin.podspec Datei mit den folgenden Konfigurationen:

Pod::Spec.new do |s|
  s.name = 'MyCapacitorPlugin'
  s.version = '1.0.0'
  s.summary = 'Your plugin description'
  s.platform = :ios, '13.0'
  s.dependency 'Capacitor'
  # Include your iOS dependencies here
  s.dependency 'Alamofire', '~> 5.6.4'
end

Podfile-Konfiguration

Nach der Initialisierung von CocoaPods, konfigurieren Sie die Podfile, um Capacitor und weitere dritte Bibliotheken einzubeziehen:

platform :ios, '13.0'
use_frameworks!

def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
end

target 'Plugin' do
  capacitor_pods
  # Add third-party dependencies
  pod 'KeychainAccess', '~> 4.2.2'
  pod 'SwiftyJSON', '~> 5.0.1'
end

target 'PluginTests' do
  capacitor_pods
end

Hier sind einige häufige Abhängigkeitskonfigurationsmuster:

Beschränkungstyp Beispiel Verwendungszweck
Pflichtversion pod 'KeychainAccess', '4.2.2' Wenn eine genaue Kontrolle erforderlich ist, wie zum Beispiel für Sicherheitskomponenten
Minor Version pod 'Alamofire', '~> 5.6' Für stabile APIs, die möglicherweise Patch-Updates erhalten
Major Version pod 'SwiftyJSON', '> 5.0' Wenn Flexibilität bei Updates akzeptabel ist

Swift Package Abhängigkeiten

Wenn Sie CocoaPods nicht verwenden möchten, ist der Swift Package Manager (SPM) eine gute Alternative. Fügen Sie SPM-Abhängigkeiten direkt in Xcode mit der folgenden Konfiguration in Ihrem Package.swift Datei:

// Package.swift
dependencies: [
    .package(url: "https://github.com/Alamofire/Alamofire.git", .upToNextMajor(from: "5.6.4")),
    .package(url: "https://github.com/SwiftyJSON/SwiftyJSON.git", from: "5.0.1")
]

Um SPM-Abhängigkeiten in Ihrem Plugin code zu verwenden, importieren Sie sie und integrieren Sie sie wie erforderlich. Zum Beispiel:

import Capacitor
import Alamofire

@objc(MyPlugin)
public class MyPlugin: CAPPlugin {
    @objc func makeRequest(_ call: CAPPluginCall) {
        AF.request("https://api.example.com/data").response { response in
            // Process the response
            call.resolve([
                "data": response.data
            ])
        }
    }
}

Diese Methode ermöglicht es Ihnen, zwischen CocoaPods und Swift Package Manager auf der Grundlage Ihrer Projektanforderungen auszuwählen.

Android-Abhängigkeiten

Stellen Sie Android-Abhängigkeiten ein, um eine glatte native Integration sicherzustellen. Hier erfahren Sie, wie Sie Abhängigkeiten für Ihr Capacitor-Plugin verwalten.

Gradle Abhängigkeiten

Gradle Build Tool Interface

Fügen Sie die folgenden Konfigurationen zu Ihrem build.gradle datei:

android {
    defaultConfig {
        minSdkVersion 22
        targetSdkVersion 33
    }
}

dependencies {
    implementation "androidx.appcompat:appcompat:1.6.1"
    implementation "com.google.code.gson:gson:2.10.1"
    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.20"
    implementation project(':capacitor-android')
}

Definieren Sie zusätzliche Versionen im buildscript Block:

buildscript {
    ext {
        androidxCoreVersion = '1.10.1'
        kotlinVersion = '1.8.20'
    }
}

Sobald die Abhängigkeiten konfiguriert sind, stellen Sie sicher, dass Sie die notwendigen Repositories einrichten.

Repository-Konfiguration

In Ihrem Projekt-Level build.gradle, fügen Sie die erforderlichen Maven-Repositories ein:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url "https://jitpack.io" }
    }
}

Wenn Sie benutzerdefinierte oder private Maven-Repositories verwenden, fügen Sie wie folgt Anmeldeinformationen hinzu:

maven {
    url "https://maven.example.com/releases"
    credentials {
        username = project.findProperty("mavenUsername") ?: System.getenv("MAVEN_USERNAME")
        password = project.findProperty("mavenPassword") ?: System.getenv("MAVEN_PASSWORD")
    }
}

Mit den Repositories eingerichtet, beheben Sie etwaige Abhängigkeitskonflikte.

Kompatibilitätsprobleme beheben

Um Abhängigkeitskonflikte zu handhaben, wenden Sie Versionserweiterungen in Ihrem build.gradle:

configurations.all {
    resolutionStrategy {
        force "org.jetbrains.kotlin:kotlin-stdlib:1.8.20"
        force "androidx.core:core-ktx:1.10.1"
    }
}

Hier sind Strategien zur Auflösung häufiger Abhängigkeitsprobleme:

Problemtyp Strategie Beispiel
Versionenkonflikt Zwingen Sie eine bestimmte Version force 'com.google.code.gson:gson:2.10.1'
Mehrere Versionen Exkludieren Sie ein Modul exclude group: 'org.json', module: 'json'
Transitive Probleme Verwenden Sie strenge Versionen strictly 'androidx.core:core-ktx:1.10.1'

Zum Beispiel können Sie konkurrierende Module wie folgt ausschließen:

dependencies {
    implementation('library:name:1.0.0') {
        exclude group: 'com.conflicting.dependency'
    }
}

Schließlich optimieren Sie Ihren Build-Prozess, indem Sie den Caching und die parallele Ausführung aktivieren in gradle.properties:

org.gradle.caching=true
org.gradle.parallel=true
org.gradle.jvmargs=-Xmx2048m

Capgo Integration

Capgo Live Update-Dashboard-Interface

Das Zusammenwirken von Capgo mit der native und JavaScript-Abhängigkeitsverwaltung erleichtert das Aktualisieren Ihres Plugins und macht es schneller.

Über Capgo

Capgo ist eine Live-Update-Plattform, die für Capacitor-Plugins und -Apps entwickelt wurde. Mit über 23,5 Millionen Updates, die in 750 Produktionsanwendungen übermittelt wurden [1], ermöglicht Capgo es Entwicklern, Updates für Abhängigkeiten und code sofort zu pushen - ohne die Prüfung durch ein App-Store-Team erforderlich. Updates werden mit Ende-zu-Ende-Verschlüsselung gesichert und erfüllen sowohl die Apple- als auch die Android-Kompatibilitätsstandards.

Capgo-Update-Funktionen

Capgo vereinfacht die Verwaltung von Plugin-Abhängigkeiten mit diesen Funktionen:

Funktion Was es tut Schlüsselmetrik
Live-Updates Push-Updates in Minuten 95% Benutzeraktualisierungsrate innerhalb von 24 Stunden
Teilaktualisierungen Herunterladen nur geänderte Dateien 434ms Durchschnittszeit für API
Versionskontrolle Verwalten Sie mehrere Versionen 82% globale Erfolgsrate
Kanalkonzept Ziel spezifische Benutzergruppen Unterstützt mehrere Bereitstellungskanäle

Quelle: [1]

Capgo funktioniert reibungslos mit CI/CD-Tools wie GitHub Actions, GitLab CI und Jenkins, automatisiert Abhängigkeitsaktualisierungen und sichert konsistente Pluginversionen. Diese Tools erleichtern die Integration von Capgo in Ihren Workflow.

Capgo einrichten

Folgen Sie diesen Schritten, um Capgo in Ihr Projekt zu integrieren:

  1. Installieren Sie das Capgo-CLI

    Führen Sie den folgenden Befehl in Ihrem Terminal aus:

    npx @capgo/cli init
  2. Einstellungen für Updates

    Verwenden Sie das Capgo-Dashboard, um Bereitstellungskanäle und -präferenzen einzurichten. Beide Cloud-Hosted- und Self-Hosted-Konfigurationen werden unterstützt.

  3. Update-Logik hinzufügen

    Fügen Sie diesen code in Ihre Haupt-Plugin-Datei ein, um Updates zu aktivieren:

    import { Capgo } from '@capgo/capacitor-updater';
    
    // Initialize Capgo
    const capgo = new Capgo({
      appId: 'YOUR_APP_ID',
      channel: 'production'
    });
    
    // Check for updates
    await capgo.checkForUpdate();

“Wir praktizieren agiles Entwicklung und @Capgo ist mission-kritisch bei der ständigen Lieferung an unsere Benutzer!” - Rodrigo Mantica

Capgo bietet auch eine Analyse-Tabelle für Echtzeit-Einsichten in die Erfolgsraten von Updates und die Aktivität der Benutzer. Funktionen wie eine Rücksetzung mit einem Klick und Fehler-Tracking helfen dabei, Probleme schnell zu lösen, und halten Ihre Plugin-Updates reibungslos laufen.

Zusammenfassung

Prozess-Überprüfung

Die Verwaltung von Abhängigkeiten für Capacitor-Plugins beinhaltet die Abstimmung der native Komponenten (iOS und Android) mit ihren JavaScript-Gegenstücken, um eine glatte Integration sicherzustellen. Dieser Prozess umfasst Plattform-spezifische Einstellungen und die Verwaltung von JavaScript-Paketen, um die beste Leistung zu erzielen. Durch die Einhaltung der aufgeführten Schritte kann eine stabile und effiziente Plugin-Funktionalität aufrechterhalten werden.

Beste Praktiken

Um Abhängigkeiten effektiv zu verwalten, sollten Sie diese Praktiken berücksichtigen:

Praxis Vorteil Umsetzung
Version-Pinning Vermeidet unerwartete Probleme Verwende feste Versionen in package.json
Plattform-Isolierung Verringert Konflikte Trennt native Abhängigkeiten
Regelmäßige Updates Verbessert die Sicherheit Wendet kritische Patches zeitnah an
Abhängigkeits-Überprüfung Ermittelt Risiken Ausführen npm audit häufig

Mit Hilfe von Live-Update-Tools wie Capgo können diese Praktiken weiter vereinfacht und verbessert werden, indem Echtzeit-Updates ermöglicht werden.

Capgo-Vorteile

Capgo vereinfacht den Abhängigkeitsmanagement-Prozess und liefert eine starke Leistung. Es erreicht einen beeindruckenden 95% Benutzeraktualisierungsrate innerhalb von 24 Stunden und hält eine globale API-Antwortzeit von 434ms [1]. Mit Ende-zu-Ende-Verschlüsselung stellt es sicher, dass sichere Updates bereitgestellt werden, die sowohl den Apple- als auch den Android-Richtlinien entsprechen. Für Teams, die mehrere Plugin-Versionen verwalten, ermöglicht Capgo's Kanal-System gezielte Bereitstellungen für bestimmte Benutzergruppen.

Hier ist ein schneller Überblick über die Leistung von Capgo:

Metrik Wert
Globale API-Antwortzeit 434ms
Update Erfolgsrate 82%
Benutzeraktualisierungsrate (24 Stunden) 95%

Weitermachen von Wie man Abhängigkeiten in Capacitor-Plugins hinzufügt

Wenn Sie " Wie man Abhängigkeiten in Capacitor-Plugins hinzufügt" um native Plugin-Arbeit zu planen, verbinden Sie es mit " Capgo-Plugin-Verzeichnis" für den Produktworkflow in Capgo-Plugin-Verzeichnis" Capacitor-Plugins von Capgo" für die Implementierungsdetails in Capacitor-Plugins von Capgo" Hinzufügen oder Aktualisieren von Plugins" für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins" Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, versenden Sie den Fix über Capgo anstatt Tage für die Genehmigung des App-Store zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Los geht's

Neueste aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um ein wirklich professionelles Mobiltelefon-App zu erstellen.