跳过主要内容

How to Add Dependencies in Capacitor Plugins

Learn to streamline dependency management in Capacitor plugins across platforms with practical steps and best practices.

How to Add Dependencies in Capacitor Plugins

添加依赖项到 Capacitor 插件可能会让人感到混乱,但分解成清晰的步骤会更容易。以下是您需要了解的内容:

  1. 了解工具:

  2. 设置您的开发环境:

  3. 开始您的 Capacitor:

    • 插件项目 npm init @capacitor/plugin 使用
  4. 添加 JavaScript 依赖项:

    • 使用 npm install 用于生产和开发依赖项。
    • 更新 package.json 以包含像 @capacitor/core.
  5. 处理平台特定依赖项:

    • iOS: 配置 CocoaPods 或 SPM 与库 AlamofireSwiftJSON.
    • Android: 使用 Gradle 添加 Gson 或 AppCompat 等依赖项。
  6. 优化性能:

    • 确保稳定性,通过固定版本、审计依赖项和解决冲突。
  7. 使用工具,如 Capgo 实时更新:

    • 无需等待应用商店审核即可立即推送更新。

工具快速比较:

平台 工具 示例依赖项
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'

Why it matters:

有效的依赖管理确保您的插件在各个平台上顺畅运行,节省时间并避免错误。让我们深入了解步骤。 Capacitor __CAPGO_KEEP_0__

Capacitor Framework Documentation Website

设置开发环境

为有效管理 Capacitor 依赖项做好准备

必备开发工具

以下是您需要的工具列表

工具 版本 用途
Node.js 16.0.0+ JavaScript 运行环境
npm 8.0.0+ 包管理
Xcode 14.0+ iOS开发(仅限Mac)
Android Studio Electric Eel+ Android开发
CocoaPods 1.11.0+ iOS依赖管理
JDK 11+ Android构建工具

创建一个新插件

使用 Capacitor CLI 来启动您的插件项目。该项目包括设置平台和使用反向域名格式命名您的插件(例如, com.mycompany.plugin):

  1. 运行以下命令:
    npm init @capacitor/plugin
  2. 选择您的目标平台(iOS/Android)。
  3. 为您的插件指定一个以域名逆向格式命名的名称。

项目设置步骤

  1. 更新 package.json

    修改您的 package.json 以包含以下内容:

    {
      "capacitor": {
        "ios": {
          "src": "ios"
        },
        "android": {
          "src": "android"
        }
      },
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
      }
    }
  2. 平台特定设置

    • 对于 iOS, 确保您的Podfile包含:

      platform :ios, '13.0'
      use_frameworks!
    • 对于 Android, 验证您的 build.gradle 包含:

      android {
          compileSdkVersion 33
          defaultConfig {
              minSdkVersion 22
          }
      }
  3. 设置环境变量

    为您的开发工具配置以下环境变量:

    变量 用途 示例值
    ANDROID_HOME Android SDK 位置 /Users/username/Library/Android/sdk
    JAVA_HOME JDK安装路径 /Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home
    XCODE_SELECT Xcode命令行工具 /Applications/Xcode.app/Contents/Developer

一旦您的项目设置就绪,您就可以开始管理JavaScript依赖项了。

JavaScript依赖项

有效地管理JavaScript依赖项是保持稳定插件性能的关键。

npm 包安装

npm

要安装依赖项,请使用以下命令:

# Add a production dependency
npm install lodash --save

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

确保手动包含依赖项的同伴文件。测试所有依赖项以确认在Web和本机平台上兼容性。 package.json 管理package.json

这里是一个示例

配置: package.json 为了保持一致性,适当锁定依赖项版本:

{
  "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"
  }
}

约束类型

示例 用途 精确
对于需要特定版本的关键依赖项 “5.0.0” 小心
^ “^5.0.0” 允许进行小型更新和修补
~ “~5.0.0” 仅允许修补更新

使用 JavaScript 库

当导入库时,应重点减少打包大小:

// 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);
  }
}

另外,请确保正确的错误处理和类型检查:

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}`);
    }
  }
}

接下来,探索如何处理 iOS 平台特有的依赖项。

iOS 依赖项

本节解释了如何在 Capacitor插件中管理原生 iOS 依赖项。

CocoaPods 设置

CocoaPods

首先在iOS目录中初始化CocoaPods:

cd ios
pod init

然后,更新文件中的以下配置: Plugin.podspec Podfile配置

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

初始化CocoaPods后,配置Podfile以包含__CAPGO_KEEP_0__和任何其他第三方库:

After initializing CocoaPods, configure the Podfile to include Capacitor and any additional third-party libraries:

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

约束类型

示例 使用场景 精确版本
exact version pod 'KeychainAccess', '4.2.2' 当需要精确控制时,例如安全组件
Minor Version pod 'Alamofire', '~> 5.6' 对于可能接收补丁更新的稳定API
Major Version pod 'SwiftyJSON', '> 5.0' 当更新之间的灵活性是可接受的

Swift Package Dependencies

如果您不想使用CocoaPods,Swift Package Manager(SPM)是一个不错的替代方案。使用以下配置在Xcode中直接添加SPM依赖项 Package.swift file:

// 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")
]

要在您的插件code中使用SPM依赖项,请导入它们并根据需要进行集成。例如:

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
            ])
        }
    }
}

这种方法允许您根据项目要求选择CocoaPods和Swift Package Manager。

Android Dependencies

Set up Android dependencies to ensure smooth native integration. Here’s how to manage dependencies for your Capacitor plugin.

Gradle 依赖项

Gradle Build Tool 接口

在您的 build.gradle 文件中添加以下配置:

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')
}

定义额外版本在 buildscript 块:

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

一旦依赖项配置完成,请确保设置必要的存储库。

存储库配置

在您的项目级别 build.gradle, 包含所需的Maven存储库:

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

如果您正在使用自定义或私有Maven存储库,请添加以下凭据:

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

已配置仓库后,应解决可能出现的依赖项冲突。

修复兼容性问题

要处理依赖项冲突,请在您的 build.gradle:

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

以下是解决常见依赖项问题的策略:

问题类型 策略 示例
版本冲突 强制使用特定版本 force 'com.google.code.gson:gson:2.10.1'
多个版本 排除模块 exclude group: 'org.json', module: 'json'
传递性问题 使用严格版本 strictly 'androidx.core:core-ktx:1.10.1'

例如,您可以通过以下方式排除冲突模块:

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

最后,通过启用缓存和并行执行来优化您的构建过程在 gradle.properties:

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

Capgo 集成

Capgo Live Update Dashboard Interface

使用Capgo与native和JavaScript依赖管理一起使用,使您的插件更新更快更容易

关于Capgo

Capgo是一款为Capacitor插件和应用程序设计的实时更新平台。通过超过750个生产应用程序的23.5万次更新 [1]Capgo允许开发人员无需等待应用商店审查即可推送依赖项和code的更新。更新使用端到端加密,并符合苹果和安卓的合规标准。

Capgo更新功能

Capgo简化了管理插件依赖项的功能:

功能 它做了什么 关键指标
实时更新 在分钟内推送更新 24小时内95%的用户更新率
部分更新 只下载更改的文件 434毫秒的平均API响应时间
版本控制 管理多个版本 全球成功率82%
频道系统 针对特定用户群组 支持多个发布频道

来源: [1]

Capgo 与 CI/CD 工具如 GitHub Actions、GitLab CI 和 Jenkins 完美集成,自动更新依赖项并确保插件版本的一致性。这些工具使得将 Capgo 集成到您的工作流程中变得更加容易。

设置 Capgo

按照以下步骤将 Capgo 集成到您的项目中:

  1. 安装 Capgo CLI

    在终端中运行以下命令:

    npx @capgo/cli init
  2. 配置更新偏好

    使用 Capgo 控制台设置发布频道和偏好。支持云托管和自托管配置。

  3. 添加更新逻辑

    Add this code to your main plugin file to enable updates:

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

“我们实行敏捷开发,@Capgo 在持续交付给用户方面至关重要!” - Rodrigo Mantica

Capgo 还提供了一个实时分析仪表板,用于获取更新成功率和用户活动的实时见解。像一键回滚和错误跟踪这样的功能有助于快速解决任何问题,保持您的插件更新顺畅。

结论

过程审查

管理Capacitor插件的依赖项涉及将本机组件(iOS和Android)与其JavaScript对应项对齐,以确保平滑的整合。这一过程包括平台特定的设置和管理JavaScript包来实现最佳性能。按照所述步骤将有助于维持稳定和高效的插件功能。

最佳实践

管理依赖项的最佳实践包括以下内容:

实践 收益 如何实施
版本固定 避免意外问题 使用固定版本 package.json
平台隔离 减少冲突 分离本机依赖
定期更新 提高安全性 及时应用关键修补程序
依赖项审计 检测风险 运行 npm audit 频繁

使用 Capgo 等实时更新工具可以进一步简化和改进这些实践,通过实时更新使其更高效。

Capgo 优势

Capgo 简化了依赖管理过程,同时提供强大的性能。它实现了惊人的 95% 用户更新率在 24 小时内 并保持全球 API 响应时间为 434ms [1]。通过端到端加密,它确保符合苹果和安卓指南的安全更新。对于管理多个插件版本的团队,Capgo 的频道系统允许针对特定用户组进行定向部署。

以下是 Capgo 的性能表现:

指标
全球 API 响应时间 434ms
更新成功率 82%
用户更新率(24小时) 95%

继续阅读如何在Capacitor插件中添加依赖

如果您正在使用 如何在Capacitor插件中添加依赖 计划原生插件工作时,连接它与 Capgo插件目录 为Capgo插件目录中的产品工作流程 Capacitor插件由Capgo 为Capacitor插件由Capgo中的实现细节 添加或更新插件 为添加或更新插件中的实现细节 Ionic Enterprise Plugin Alternatives 为 Ionic Enterprise Plugin Alternatives 的产品工作流程 Capgo Native Builds 为 Capgo Native Builds 的产品工作流程

Capacitor应用实时更新

当一个 web 层 bug 活跃时,通过 Capgo 将修复推送到应用商店,而不是等待几天的审批时间。用户在后台接收更新,而原生变化仍在正常的审批路径中。

来自马丁的专业支持

立即开始

最新博客

Capgo 给您创建真正专业的移动应用所需的最佳见解。