跳过主要内容

如何自定义构建脚本:Capacitor CLI

了解如何使用Capacitor CLI自定义构建脚本,实现高效的部署和针对各个平台的应用更新

马丁·多纳迪厄

马丁·多纳迪厄

内容营销人员

如何自定义构建脚本:Capacitor CLI

Capacitor CLI让您可以自定义应用的构建过程,适用于iOS、Android和Web平台。通过调整构建脚本,您可以:

  • 加速更新:立即推送更改,无需等待应用商店延迟.
  • 控制发布: 回滚更新或针对特定用户组。
  • 安全你的应用: 使用加密保护更新。
  • 优化构建: 调整设置以满足平台特定的需求。

快速概览:关键功能

  • 配置文件: 使用 capacitor.config.jsonpackage.json 来管理构建设置。
  • 自定义脚本: 添加预构建和后构建任务以实现自动化。
  • 构建钩子: 在构建过程的特定阶段运行 code。
  • 环境变量: 使用 __CAPGO_KEEP_0__ 简化环境特定构建。 .env 文件。

Capgo, 一款部署工具,通过自动更新、版本跟踪和全局性能优化等功能,进一步优化了此过程。继续阅读以了解如何设置和自定义您的构建脚本以实现最高效率。 介绍__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ Capacitor 配置

Capacitor 框架文档网站

Capacitor 默认构建过程

了解 Capacitor 如何处理其默认构建过程至关重要,如果您想自定义它。以下,我们将分解 Capacitor CLI 的构建过程及其关键配置文件。

标准构建步骤

Capacitor 使用逐步过程将您的 web 应用程序转换为平台特定的构建。以下是默认构建过程的内容:

阶段描述输出
Web 构建使用您的框架工具编译 web 资产优化的 Web 包
复制资产将 Web 资产移动到本机平台文件夹平台特定的资产目录
本机构建运行平台特定的构建命令可部署的二进制文件
验证检查构建完整性和依赖项构建状态和警告

主配置文件

两个关键配置文件决定了 Capacitor 如何处理您的构建:

capacitor.config.json
Capacitor项目的核心配置文件。它设置了对构建的重要参数:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId:应用程序的唯一标识符。
  • appName:应用程序的名称。
  • webDir:指定Capacitor应该在哪里查找Web资产(例如 dist).
  • plugins:允许您配置插件特定的设置,例如SplashScreen选项。

package.json
此文件包含影响构建过程的构建脚本和依赖项:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • 的设置 webDir 告诉__CAPGO_KEEP_0__在哪里查找编译的Web资产以在原生构建中包含。 capacitor.config.json tells Capacitor where to locate your compiled web assets for inclusion in the native builds.
  • __CAPGO_KEEP_0__ capacitor.config.json,需要运行 cap sync 以确保您的本地项目得到更新。

接下来,我们将探索如何修改这些设置以进一步定制您的构建。

修改构建脚本

您可以调整Capacitor的默认构建过程以更好地适应您的项目需求。以下是如何做到的:

配置文件设置

您可以通过编辑 capacitor.config.json 文件来调整构建过程。以下是示例配置:

{
  "appId": "com.example.app",
  "webDir": "www",
  "server": {
    "hostname": "localhost",
    "androidScheme": "https",
    "iosScheme": "https",
    "allowNavigation": ["*.example.com"]
  },
  "android": {
    "buildOptions": {
      "keystorePath": "release.keystore",
      "keystorePassword": "mypassword",
      "keystoreAlias": "release",
      "keystoreAliasPassword": "mypassword"
    }
  },
  "ios": {
    "scheme": "App",
    "automaticProvisioning": true
  }
}

以下是您可以修改的关键设置:

  • webDir: 指定您的编译后的 Web 资产所在位置。
  • server: 配置开发服务器,包括主机名和导航权限。
  • android/ios: 允许平台特定的构建设置,例如 Android 的 keystore 详情或 iOS 的分发选项。

创建 NPM 脚本

为了简化您的工作流程,添加自定义 NPM 脚本到您的文件中。以下是一个示例: package.json 和:

{
  "scripts": {
    "prebuild": "node ./scripts/prepare-env.js",
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "build:ios": "cap build ios --release",
    "build:android": "cap build android --release",
    "postbuild": "node ./scripts/notify-completion.js"
  }
}
  • prebuild : 用于设置环境或在构建完成时发送通知等任务。 postbuild: 平台特定命令,用于构建 Android 或 iOS 应用。
  • build:platform您可以通过添加构建钩子来进一步自动化。构建钩子设置

为了获得更高级别的控制,使用构建钩子来执行自定义 __CAPGO_KEEP_0__,在构建过程的特定点。以下是一个示例设置在

通过构建钩子,您可以:

For more advanced control, use build hooks to execute custom code at specific points during the build process. Here’s an example setup in capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  plugins: {
    CapacitorHooks: {
      beforeBuild: async () => {
        console.log('Running pre-build tasks...');
        // Add your pre-build tasks here
      },
      afterBuild: async () => {
        console.log('Running post-build tasks...');
        // Add your post-build tasks here
      }
    }
  }
};

export default config;

在过程中转换资产

  • Build Hooks Setup
  • To streamline your workflow, add custom __CAPGO_KEEP_0__ scripts to your file. Here’s an example: and : Use these for tasks like setting up the environment or sending notifications when the build finishes. : Platform-specific commands for building Android or iOS apps. You can take automation even further by adding build hooks. Build Hooks Setup For more advanced control, use build hooks to execute custom __CAPGO_KEEP_0__ at specific points during the build process. Here’s an example setup in With build hooks, you can: Validate requirements before the build starts Transform assets during the process
  • 在关键点触发通知
  • __CAPGO_KEEP_0__
  • 自动更新版本号

这项方法让您对整个构建生命周期拥有更大的灵活性和控制权。

高级构建定制

在处理大型项目时,精细调整您的构建过程确实会带来很大差异。以下是如何有效地处理环境特定的构建和平台定制的方法。

环境变量

通过创建每个环境的单独文件来设置环境变量: .env 然后,配置您的构建脚本以根据环境加载适当的文件:

  • .env.development
  • .env.staging
  • .env.production

您还可以根据平台的具体要求进行这些设置的调整。

import { defineConfig } from '@capacitor/cli';

export default defineConfig({
  ios: {
    buildConfig: {
      environment: process.env.BUILD_ENV || 'development',
      configurations: {
        development: {
          signing: {
            debug: true,
            automaticProvisioning: true
          }
        },
        production: {
          signing: {
            release: true,
            provisioningProfile: 'dist/profile.mobileprovision'
          }
        }
      }
    }
  }
});

平台特定构建

__CAPGO_KEEP_1__

为了定制 Android 和 iOS 的构建,请使用以下结构:

const platformConfig = {
  android: {
    buildType: process.env.BUILD_TYPE || 'debug',
    keystoreConfig: {
      path: process.env.KEYSTORE_PATH,
      password: process.env.KEYSTORE_PASSWORD,
      alias: process.env.KEYSTORE_ALIAS
    }
  },
  ios: {
    scheme: process.env.APP_SCHEME || 'App',
    xcodePreferences: {
      automaticSigning: false,
      developmentTeam: process.env.DEVELOPMENT_TEAM
    }
  }
};

这些配置允许您为每个平台定制构建,从而实现更顺畅的部署。

功能AndroidiOS
调试符号ProGuard 映射文件dSYM 文件
构建变体debug,发布,阶段debug,发布
Code 签名密钥库管理分发配置文件
资源管理res/drawable 优化资源目录

优化构建的附加提示包括:

  • 使用部分更新来节省部署时间
  • 设置错误跟踪来快速识别问题
  • 创建渠道系统来测试 beta 版本
  • 启用端到端加密来实现安全分发

与分析和安全更新工具如 Capgo 配对时,这些技术可以让您更好地控制您的部署过程 [1].

Build Script Problems & Fixes

在使用自定义构建配置时,快速解决错误对于保持构建过程的顺畅至关重要。

Fix Common Errors

许多构建脚本问题源于环境设置或依赖问题。以下是如何解决一些常见问题的方法:

Missing Environment Variables

如果您遇到以下错误:

error: Cannot find environment configuration for BUILD_ENV

您可以通过在项目根目录中创建一个 .env.local 文件来解决它。以下是示例:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Platform-Specific Build Failures

对于 Android 签名错误,请使用以下命令:

npx cap build android --keystorePassword=$KEYSTORE_PASSWORD --keystoreAlias=$KEYSTORE_ALIAS

对于 iOS 配置文件问题,请尝试以下命令:

npx cap build ios --configuration=release --type=development
Error Type共同原因解决方案
签名配置缺少keystore详细信息设置 KEYSTORE_PATH 和凭据
构建环境未定义的变量创建平台特定的 .env 文件
依赖项版本不匹配Update package.json 和同步

修复后,请确保您的更改是稳固的,通过运行全面构建测试来验证。

测试构建脚本

一旦错误得到解决,使用以下步骤验证您的构建脚本:

  • 自动验证: 运行关键命令以确认构建过程如预期工作。
npm run build
npx cap sync
npx cap copy
  • 环境验证: 在开始构建之前检查是否缺少环境变量。
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • 构建脚本调试: 添加详细脚本以捕获构建过程中潜在问题。
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

测试的额外提示:

Capgo __CAPGO_KEEP_0__ 实时更新控制台界面

Capgo

Capgo 将构建脚本推向下一个层次,通过自动部署来提高效率并简化流程。

快速应用更新

Capgo 的更新性能令人印象深刻:

  • 95% 的活跃用户 在 24 小时内接收更新。
  • 82% 的成功率 用于全球更新交付。
  • API 全球平均响应时间为 434ms.

该平台使用部分更新,这意味着只下载更改。这一方法减少了带宽使用量并加快了更新过程。另外,整个构建过程都是完全自动化的,节省了时间和精力。

构建自动化

Capgo 与主要 CI/CD 平台无缝集成,提供多种集成:

CI/CD 平台集成功能优势
GitHub 动作自动构建, 部署触发器持续部署
GitLab CI管道自动化, 版本控制流程化工作流
Jenkins自定义工作流, 构建钩子企业级可扩展

设置自动构建通常每月花费约 $300,远低于传统解决方案的每年 $6,000.

安全标准

Capgo

  • 优先考虑安全性,包括:
  • 更新包的端到端加密。
  • 安全密钥管理。

遵守苹果和谷歌的指南。

  • 版本控制功能
  • 即时回滚选项。
  • 更新渠道管理

此安全框架已在数百个企业应用程序中进行了严格的测试。对于需要额外安全性的团队,Capgo还提供了自主托管的解决方案,具有可自定义的配置。

Capgo的渠道系统使得更新分发变得灵活。开发人员可以针对不同版本的特定用户组,适合测试或逐步发布。

概要

构建步骤概览

自定义构建脚本允许通过利用构建钩子、环境变量和平台特定命令来实现自动化和一致的部署。这些过程为通过Capgo实现的部署改进奠定了坚实的基础。

Capgo的好处

Capgo简化了部署,成功交付了超过2,350万次更新,覆盖了750个生产应用程序。 [1]其部分更新系统减少了带宽使用量和部署时间。

该平台提供快速更新、全球性能优化、端到端加密安全以及灵活的基于渠道的分发系统。这一设置支持目标更新、测试和遵守应用商店指南,同时保持强大的安全框架。

从如何自定义构建脚本中继续Capacitor CLI

如果您正在使用 如何自定义构建脚本使用 Capacitor CLI 为CI/CD自动化规划,连接它 Capgo CI/CD 在Capgo CI/CD中产品工作流程 Capgo 原生构建 在Capgo 原生构建中产品工作流程 Capgo 集成 在Capgo 集成中产品工作流程 CI/CD集成 CI/CD集成的实现细节 GitHub 动作集成 在GitHub 动作集成中实现细节

实时更新Capacitor应用

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

立即开始

博客最新文章

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