跳过主要内容

如何在Capacitor插件中添加依赖项

了解如何在Capacitor插件中跨平台管理依赖项的实用步骤和最佳实践

马丁·多纳迪厄

马丁·多纳迪厄

Content Marketer

如何在Capacitor插件中添加依赖

添加依赖到 Capacitor 插件添加依赖可能会感到令人沮丧,但当分解为清晰的步骤时,它会变得更容易。以下是您需要了解的内容:

  1. 了解工具:

    • JavaScript: 使用 npm 来管理依赖项.
    • iOS: 使用 来管理依赖项. 或 Swift Package Manager (SPM).
    • Android: 使用 Gradle 用于依赖管理。
  2. 设置您的开发环境:

  3. 开始你的 Capacitor 插件项目:

    • 使用 npm init @capacitor/plugin 来创建一个新插件。
  4. 添加 JavaScript 依赖项:

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

    • iOS:配置 CocoaPods 或 SPM 与类似库 AlamofireSwiftyJSON.
    • 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'

为什么它很重要:有效地管理依赖项确保您的插件在各个平台上工作得平滑,节省时间并避免错误。让我们深入了解步骤。

如何创建一个 Capacitor iOS/Android

Capacitor

设置开发环境

为处理依赖项做好准备 Capacitor 依赖项管理

必备开发工具

以下是您需要的工具列表:

工具 版本 功能
Node.js 16.0.0+ JavaScript 运行环境
npm 8.0.0+ 包管理
Xcode 14.0+ 仅限 Mac 的 iOS 开发
Android Studio Electric Eel+ Android 开发
CocoaPods 1.11.0+ iOS 依赖管理
JDK 11+ Android build tools

开始一个新插件

使用 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. 平台特定设置

    • For iOS, ensure your Podfile includes: For Android, verify your包含:

      platform :ios, '13.0'
      use_frameworks!
    • 设置开发环境变量 配置以下环境变量为您的开发工具:变量 build.gradle 目的

      android {
          compileSdkVersion 33
          defaultConfig {
              minSdkVersion 22
          }
      }
  3. 示例值

    __CAPGO_KEEP_0__

    __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
    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

确保手动包含依赖项的 peer 依赖项。测试所有依赖项以确认其在 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"
  }
}

约束类型

示例 Constraint Type Example 使用场景
精确 “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 依赖项

本节解释了如何管理本机iOS依赖项在 Capacitor 插件中。 一旦您设置了JavaScript依赖项,下一步就是处理本机iOS依赖项。

CocoaPods 配置

CocoaPods

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

cd ios
pod init

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

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 配置

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

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

以下是常见的依赖项配置模式:

约束类型 示例 用例
精确版本 pod 'KeychainAccess', '4.2.2' 当需要精确控制,例如安全组件时
修订版本 pod 'Alamofire', '~> 5.6' 对于可能接收补丁更新的稳定API
主要版本 pod 'SwiftyJSON', '> 5.0' 当更新时可接受的灵活性

Swift包依赖

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

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

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

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 依赖项

确保原生集成顺畅,请设置 Android 依赖项。以下是如何为您的 Capacitor 插件管理依赖项的步骤。

Gradle 依赖项

Gradle 构建工具接口

将以下配置添加到您的 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 实时更新控制台界面

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

关于 Capgo

Capgo 是一个实时更新平台,专为 Capacitor 插件和应用程序设计。该平台已成功为 750 个生产应用程序交付超过 2350 万次更新 [1]Capgo 允许开发者在不需要应用商店审查的情况下,立即推送依赖项和 code 的更新。该平台的更新均采用端到端加密,并符合苹果和安卓的合规标准。

Capgo 更新功能

Capgo 简化了管理插件依赖项的工作,以下是这些功能:

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

来源: [1]

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

设置Capgo

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

  1. 安装Capgo的CLI

    在您的终端中运行以下命令:

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

    使用 Capgo 控制台来设置部署通道和偏好。支持云托管和自托管配置。

  3. 添加更新逻辑

    将此 code 添加到主插件文件中,以启用更新:

    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 在持续交付给用户方面是 mission-critical!” - 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%

从 How to Add Dependencies in Capacitor 插件 中继续

如果您正在使用 如何在 Capacitor 插件 中添加依赖项 以规划本机插件工作,连接它与 Capgo 插件目录 为产品工作流程在 Capgo 插件目录 中 Capacitor 插件由 Capgo 提供 了解 Capacitor 插件由 Capgo 提供的实现细节 添加或更新插件 了解添加或更新插件的实现细节 Ionic Enterprise 插件替代品 了解 Ionic Enterprise 插件替代品的产品工作流程 Capgo 原生构建 了解 Capgo 原生构建的产品工作流程

Capacitor 应用的实时更新

当 web 层面的 bug 在 live 状态时,通过 Capgo 直接将修复推送给用户,而不是等待几天的 app store 审核时间。用户在后台接收更新,而原生代码的变更仍然在正常的审查路径中。

立即开始

博客最新文章

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