Saltar al contenido principal

How to Customize Build Scripts with Capacitor CLI

Learn how to customize your build scripts using Capacitor CLI for efficient deployments and tailored app updates across platforms.

How to Customize Build Scripts with Capacitor CLI

Capacitor CLI lets you customize your app’s build process for iOS, Android, and web platforms. By tweaking build scripts, you can:

  • Acelera actualizaciones: Envía cambios de manera instantánea sin retrasos de tiendas de aplicaciones.
  • Controla despliegues: Revierte actualizaciones o dirija actualizaciones a grupos de usuarios específicos.
  • Protege tu aplicación: Utiliza cifrado para proteger actualizaciones.
  • Optimiza compilaciones: Ajusta configuraciones para necesidades específicas de plataforma.

Resumen rápido de características clave:

  • Archivos de configuración: Utiliza capacitor.config.json y package.json para gestionar las configuraciones de compilación.
  • Scripts personalizados: Agregar tareas de precompilación y postcompilación para automatizar.
  • hooks de compilación: Ejecutar code durante las etapas específicas del proceso de compilación.
  • variables de entorno: Simplificar compilaciones específicas del entorno con .env archivos.

Capgocontexto: texto fragmento HTML de una cadena de UI de Capgo más larga (clave de página `submitting_a_pr_to_capgo`). Página/área: sitio web de marketing de Capgo. Rol: copia de sitio web. Visto en: página contributing.astro. Preservar términos de producto/marca y términos de desarrollador exactamente. Clave de mensaje `submitting_a_pr_to_capgo` (Enviar Un Pr A Capgo). , una herramienta de despliegue, mejora este proceso conactualizaciones automatizadas. Versión de seguimiento y optimización de rendimiento global. Siga leyendo para aprender a configurar y personalizar sus scripts de compilación para la máxima eficiencia.

Introduciendo Capacitor Configura

Capacitor Documentación del sitio web del marco de trabajo

Proceso de compilación predeterminado en Capacitor

Para comprender cómo Capacitor maneja su proceso de compilación predeterminado es crucial si deseas personalizarlo de manera efectiva. A continuación, se desglosará el proceso de compilación de Capacitor CLI y sus archivos de configuración clave.

Pasos de compilación estándar

Capacitor utiliza un proceso paso a paso para transformar tu aplicación web en compilaciones específicas de plataforma. Aquí está lo que sucede durante el proceso de compilación predeterminado:

Fase Descripción Salida
Compilación Web Compila activos web utilizando herramientas de tu framework Paquete web optimizado
Copiar Activos Mueve activos web a carpetas de plataforma nativa Directorios de activos de plataforma específicos
Compilación Nativa Ejecuta comandos de compilación específicos de plataforma Binarios listos para despliegue
Verificación Verifica la integridad y dependencias de la compilación Estado de la compilación y advertencias

Archivos de Configuración Principales

Los dos archivos de configuración clave determinan cómo Capacitor maneja tus compilaciones:

capacitor.config.json
Este es el archivo de configuración principal para tu proyecto Capacitor. Establece parámetros importantes para tus compilaciones:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId: Un identificador único para tu aplicación.
  • appName: El nombre de tu aplicación.
  • webDir: Especifica dónde Capacitor debe buscar los activos web (por ejemplo, dist).
  • plugins: Te permite configurar opciones específicas de plugins, como opciones de SplashScreen.

package.json
Este archivo incluye scripts de compilación y dependencias que influyen en el proceso de compilación:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • El webDir configuración en capacitor.config.json explica a Capacitor dónde ubicar tus activos web compilados para su inclusión en las compilaciones nativas.
  • Después de hacer cambios en capacitor.config.jsonPara asegurarte de que tus proyectos nativos estén actualizados. cap sync En el siguiente paso, exploraremos cómo puedes modificar estos ajustes para personalizar aún más tus compilaciones.

Modificar los scripts de compilación

Puedes ajustar el proceso de compilación predeterminado de __CAPGO_KEEP_0__ para que se adapte mejor a las necesidades de tu proyecto. Aquí está cómo hacerlo:

You can tweak Capacitor’s default build process to better suit your project needs. Here’s how:

Puedes ajustar el proceso de compilación editando el

archivo. A continuación, se muestra un ejemplo de configuración: capacitor.config.json A continuación, se presentan algunos ajustes clave que puedes modificar:

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

: especifica dónde se encuentran tus activos web compilados.

  • webDirPara asegurarte de que tus proyectos nativos estén actualizados.
  • server: Configura el servidor de desarrollo, incluyendo el nombre de host y los permisos de navegación.
  • android/ios: Permite ajustes de compilación específicos de plataforma, como detalles de keystore para Android o opciones de provisión para iOS.

Crear Scripts de NPM

Para simplificar tu flujo de trabajo, agrega scripts de NPM personalizados a tu package.json archivo. Aquí tienes un ejemplo:

{
  "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 y postbuild: Utiliza estos para tareas como configurar el entorno o enviar notificaciones cuando se complete la compilación.
  • build:platform: Comandos específicos de plataforma para compilar aplicaciones de Android o iOS.

Puedes llevar la automatización aún más lejos agregando hooks de compilación.

Hooks de Compilación

Para un control más avanzado, utiliza hooks de compilación para ejecutar scripts de code personalizados en puntos específicos del proceso de compilación. Aquí tienes un ejemplo de configuración en 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;

Con hooks de compilación, puedes:

  • Verifique los requisitos antes de que comience la compilación
  • Transforme activos durante el proceso
  • Active notificaciones en puntos clave
  • Actualice automáticamente los números de versión
  • Ejecute pruebas automatizadas de manera fluida

Esta aproximación le da mayor flexibilidad y control sobre todo el ciclo de compilación.

Personalización de Compilación Avanzada

Cuando se trabaja en proyectos más grandes, afinar el proceso de compilación puede hacer una gran diferencia. Aquí está cómo manejar compilaciones específicas de entorno y personalizaciones de plataforma de manera efectiva.

Variables de Entorno

Configura variables de entorno creando archivos separados para cada entorno: .env Luego, configura tu script de compilación para cargar el archivo apropiado según el entorno:

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

items

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

Podrías ajustar aún más estos ajustes para que se adapten a las necesidades específicas de cada plataforma.

Edición de plataforma

Para personalizar las compilaciones para Android e iOS, utilice la siguiente estructura:

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

Estas configuraciones te permiten personalizar las compilaciones para cada plataforma, asegurando una implementación más suave.

Característica Android iOS
Simbolos de depuración ProGuard archivos de mapa archivos dSYM
Variantes de compilación debug, release, staging debug, release
Code Firma Gestión de keystore Gestión de perfiles de provisión
Gestión de activos optimización de res/drawable Gestiones de catálogos de activos

Consejos adicionales para optimizar tus compilaciones incluyen:

  • Usar actualizaciones parciales para ahorrar tiempo durante las implementaciones
  • Configurando la seguimiento de errores para identificar rápidamente problemas
  • Crear sistemas de canales para pruebas de versiones beta
  • Activar la cifrado de extremo a extremo para una distribución segura

Cuando se combina con herramientas como Capgo para análisis y actualizaciones seguras, estas técnicas te dan más control sobre tu proceso de despliegue [1].

Problemas y soluciones de scripts de compilación

Cuando se trabaja con configuraciones de compilación personalizadas, resolver errores rápidamente es crucial para mantener el proceso de compilación en funcionamiento de manera fluida

Solución de errores comunes

Muchos problemas de scripts de compilación provienen de problemas de configuración de entorno o dependencias. Aquí hay cómo abordar algunos de los más comunes:

Falta de variables de entorno

Si se produce un error como este:

error: Cannot find environment configuration for BUILD_ENV

Puedes solucionarlo creando un archivo en el directorio raíz de tu proyecto. Aquí tienes un ejemplo: .env.local Fallas de compilación específicas de plataforma

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Para errores de firma de Android, utiliza este comando:

Si no tienes una cuenta de GitHub, puedes crear una cuenta gratuita en el sitio web de GitHub.

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

Para problemas de perfil de provisión de iOS, intenta esto:

npx cap build ios --configuration=release --type=development
Tipo de Error Causa común Solución
Configuración de firma Detalles de keystore faltantes Establecer KEYSTORE_PATH y credenciales
Entorno de compilación Variables no definidas Crear archivos específicos de plataforma .env Crear archivos específicos de plataforma
Dependencias Desacuerdos de versión Actualizar package.json y sincronizar

Después de aplicar las correcciones, asegúrese de que sus cambios sean sólidos ejecutando pruebas de compilación exhaustivas.

Prueba los scripts de compilación

Una vez que se resuelvan los errores, valide sus scripts de compilación con los siguientes pasos:

  • Verificación Automática: Ejecute comandos clave para confirmar que el proceso de compilación funciona como se espera.
npm run build
npx cap sync
npx cap copy
  • Validación del Entorno: Verifique las variables de entorno faltantes antes de iniciar la compilación.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Depuración de Scripts de Compilación: Agregue scripts detallados para capturar posibles problemas durante la compilación.
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Consejos adicionales para la prueba:

  • Usar contenedores de Docker
  • para aislar las compilaciones.
  • Validar archivos de configuración antes de iniciar el proceso. Probar con múltiples versiones de Node.js.
  • Confirmar que se cumplen los requisitos específicos de la plataforma.
  • Mantener un ojo en el rendimiento de la compilación para posibles mejoras.

Capgo Características de construcción

Capgo Panel de control de actualizaciones en vivo de interfaz

Capgo lleva los scripts de construcción al siguiente nivel con la implementación automática, mejorando la eficiencia y simplificando el proceso.

Actualizaciones de aplicaciones rápidas

Capgo’s rendimiento de actualización es impresionante:

  • 95% de los usuarios activos reciben actualizaciones dentro de 24 horas.
  • 82% de tasa de éxito para la entrega de actualizaciones en todo el mundo.
  • Un tiempo de respuesta promedio de API de 434ms a nivel global.

La plataforma utiliza actualizaciones parciales, lo que significa que solo se descargan los cambios. Esta aproximación reduce el uso de banda y acelera el proceso de actualización. Además, todo el proceso de construcción está completamente automatizado, lo que ahorra tiempo y esfuerzo.

Automación de construcción

Capgo funciona de manera fluida con las principales plataformas CI/CD, ofreciendo una variedad de integraciones:

Plataforma CI/CD Características de integración Ventajas
GitHub Actions __CAPGO_KEEP_0__ Acciones Construcciones automatizadas, Desencadenantes de despliegue
Despliegue continuo CI de GitLab Automatización de pipeline, Control de versiones
Flujo de trabajo simplificado Flujos de trabajo personalizados, Hooks de compilación Escalable para empresas

Configurar un proceso de compilación automático suele costar alrededor de $300 por mes, lo que es mucho más asequible en comparación con soluciones tradicionales que pueden llegar a $6,000 anualmente.

Estándares de seguridad

Capgo prioriza la seguridad con un marco robusto que incluye:

  • Encriptación de extremo a extremo para paquetes de actualización.
  • Gestión de claves segura.
  • Cumplimiento con las directrices de Apple y Google.

Características de control de versiones

  • Opciones de rollback instantáneo.
  • Seguimiento de versiones de despliegue.
  • Gestión de canales de actualización para lanzamientos etapas.

Este marco de seguridad ha sido sometido a pruebas rigurosas en cientos de aplicaciones empresariales. Para los equipos que necesitan seguridad adicional, Capgo también ofrece soluciones autoadministradas con configuraciones personalizables.

El sistema de canales de Capgo permite una distribución flexible de actualizaciones. Los desarrolladores pueden dirigirse a grupos de usuarios específicos con diferentes versiones, perfecto para pruebas de beta o lanzamientos graduales.

Resumen

Visión general de los pasos de construcción

Los scripts de construcción personalizados permiten despliegues automatizados y consistentes aprovechando las llamadas de hook de construcción, variables de entorno y comandos específicos de plataforma. Estos procesos crean una base sólida para las mejoras de despliegue posibles con Capgo.

Beneficios de Capgo

Capgo simplifica el despliegue, habiendo entregado con éxito más de 23,5 millones de actualizaciones en 750 aplicaciones de producción. [1]Su sistema de actualizaciones parciales reduce tanto el uso de ancho de banda como el tiempo de despliegue.

La plataforma proporciona actualizaciones rápidas, optimización de rendimiento global, cifrado de extremo a extremo para la seguridad y un sistema de distribución flexible basado en canales. Este conjunto de configuración apoya actualizaciones dirigidas, pruebas de beta y cumplimiento con las directrices de las tiendas de aplicaciones mientras mantiene un marco de seguridad sólido.

Seguir adelante desde Cómo personalizar los scripts de compilación con Capacitor CLI

Si estás utilizando Cómo personalizar los scripts de compilación con Capacitor CLI para planificar la automatización de CI/CD, conecta con Capgo automatización de CI/CD para el flujo de trabajo del producto en Capgo automatización de CI/CD, Capgo compilaciones nativas para el flujo de trabajo del producto en Capgo compilaciones nativas, Capgo integraciones para el flujo de trabajo del producto en Capgo integraciones, Integraciones contexto: Área/Página: Sección de marketing de integraciones. Rol: Título de sección o página. Visto en: página integrations.astro. Preservar términos de producto/marca y términos de desarrollador exactamente. Clave de mensaje `integrations_title` (Título de integraciones). GitHub Acciones de Integración para el detalle de implementación en GitHub Acciones de Integración.

Actualizaciones en vivo para aplicaciones Capacitor

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Cuando un bug de capa web está vivo, envíe la corrección a través de __CAPGO_KEEP_0__ en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios obtienen la actualización en segundo plano mientras los cambios nativos permanecen en el camino de revisión normal.

Contexto: Página/área: Sitio web de marketing de Capgo. Rol: Descripción de apoyo o descripción meta. Visto en: componente GetStarted.astro. Preservar términos de producto/marca de Capgo exactamente. Clave de mensaje `instant_updates_for_capacitor_apps_description` (Descripción de Actualizaciones Instantáneas para Aplicaciones de Capacitor).

Apoyo humano de Martin

Capgo gives you the best insights you need to create a truly professional mobile app.