Saltar al contenido principal

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

Aprende a personalizar tus scripts de compilación utilizando Capacitor CLI para despliegues eficientes y actualizaciones de aplicaciones adaptadas a las plataformas.

Martin Donadieu

Martin Donadieu

Gerente de Contenido

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

Capacitor CLI te permite personalizar el proceso de compilación de tu aplicación para las plataformas iOS, Android y web. Al ajustar los scripts de compilación, puedes:

  • Acelere las actualizaciones: Envíe cambios instantáneamente sin retrasos de tiendas de aplicaciones.
  • Controla las despliegues: Vuelva a implementar actualizaciones o dirija grupos de usuarios específicos.
  • Protege tu aplicación: Utilice la cifrado para proteger actualizaciones.
  • Optimiza compilaciones: Ajuste configuraciones para necesidades específicas de plataforma.

Resumen rápido de características clave:

  • : UtiliceArchivos de configuración capacitor.config.json : Utilice __CAPGO_KEEP_0__ y __CAPGO_KEEP_1__ package.json gestionar ajustes de compilación.
  • Scripts personalizados: Agregar tareas de precompilación y postcompilación para automatizar.
  • Herramientas de compilación: Ejecutar code durante etapas específicas del proceso de compilación.
  • Variables de entorno: Simplificar compilaciones específicas del entorno con .env archivos.

Capgo, una herramienta de despliegue, mejora este proceso con actualizaciones automatizadas, seguimiento de versiones, y optimización de rendimiento global. Siga leyendo para aprender a configurar y personalizar tus 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

Es crucial entender cómo Capacitor maneja su proceso de compilación predeterminado si deseas personalizarlo de manera efectiva. A continuación, se desglosará el proceso de compilación y los archivos de configuración clave del Capacitor CLI.

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
Construye Web Compila activos web utilizando herramientas de marco de tu framework Paquete web optimizado
Copia Activos Mueve activos web a carpetas de plataforma nativa Directorios de activos específicos de plataforma
Construye Nativa Ejecuta comandos de construcción específicos de plataforma Binarios listos para despliegue
Verificación Revisa la integridad y dependencias de la construcción Estado de la construcción y advertencias

Archivos de Configuración Principales

Two key configuration files shape how Capacitor handles your builds:

capacitor.config.json
This is the core configuration file for your Capacitor project. It sets important parameters for your builds:

{
  "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: Specifies where Capacitor should look for the web assets (e.g., dist).
  • plugins: Te permite configurar opciones específicas de plugin, 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 le dice a Capacitor dónde ubicar sus activos web compilados para su inclusión en las compilaciones nativas.
  • Después de realizar cambios en capacitor.config.json, debe ejecutar cap sync para asegurarse de que los proyectos nativos estén actualizados.

En el siguiente paso, exploraremos cómo puede modificar estos ajustes para personalizar aún más sus compilaciones.

Configuración de Scripts de Compilación

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

Ajustes de archivo de configuración

Puede ajustar el proceso de compilación editando el capacitor.config.json archivo. A continuación, se muestra un ejemplo de configuración:

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

A continuación, se presentan algunos ajustes clave que puede modificar:

  • webDir: especifica dónde se encuentran los activos web compilados.
  • server: Configura el servidor de desarrollo, incluyendo el nombre de host y los permisos de navegación.
  • android/ios: Permite configuraciones de compilación específicas de plataforma, como detalles de keystore para Android o opciones de provisión para iOS.

Creando NPM Scripts

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, utilice hooks de compilación para ejecutar 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 los números de versión automáticamente
  • Ejecuta 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

Al trabajar en proyectos más grandes, afinar su 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 su script de compilación para cargar el archivo apropiado según el entorno:

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

__CAPGO_KEEP_0__

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á ajustar aún más estos ajustes para que se adapten a las especificaciones de la plataforma.

Edición de la 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 le permiten personalizar las compilaciones para cada plataforma, garantizando una implementación más suave.

Característica Android iOS
Simbolos de depuración ProGuard archivos de mapeo archivos dSYM
Variantes de compilación depuración, lanzamiento, etapa de pruebas depuración, lanzamiento
Code Firma Gestión de keystore Perfiles de provisión
Gestión de activos optimización de res/drawable Catálogos de activos

Consejos adicionales para optimizar tus compilaciones incluyen:

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

Al combinarlo con herramientas como Capgo para análisis y actualizaciones seguras, estas técnicas te dan más control sobre tu proceso de implementación [1].

Problemas y soluciones de script de construcción

Al trabajar con configuraciones de construcción personalizadas, abordar errores rápidamente es crucial para mantener el proceso de construcción en funcionamiento

Solución de errores comunes

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

Variables de entorno faltantes

Si se produce un error como este:

error: Cannot find environment configuration for BUILD_ENV

Puedes solucionarlo creando un .env.local archivo en el directorio raíz de tu proyecto. Aquí tienes un ejemplo:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fallas de construcción específicas de plataforma

Para errores de firma de Android, utiliza este comando:

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

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

npx cap build ios --configuration=release --type=development
Tipo de error Causa común Solución
Configuración de firma Detalles del keystore faltantes Establecer KEYSTORE_PATH y credenciales
Entorno de compilación Variables no definidas Crear archivos específicos de plataforma .env files
Dependencias Incompatibilidades de versión Actualizar y sincronizar 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.

Pruebas de scripts de compilación

Una vez que se resuelvan los errores, valide sus scripts de compilación con estos 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:

Capgo Construye Características

Capgo Actualización en Vivo Panel de Interface

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

Actualizaciones de Aplicaciones Rápidas

Capgo’s rendimiento de actualización es impresionante:

  • 95% de usuarios activos reciben actualizaciones dentro de 24 horas.
  • 82% de tasa de éxito para 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 ancho 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.

Automatizació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 Beneficios
GitHub Acciones Construcciones automatizadas, Desencadenantes de despliegue Despliegue continuo
Control de versiones de GitLab CI Automatización de pipeline, Control de versiones Flujo de trabajo simplificado
Jenkins Flujos personalizados, Ganchos de construcció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 las 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 seguras.
  • 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 etapa.

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

El sistema de canales de Capgo hace que la distribución de actualizaciones sea flexible. 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.

Ventajas 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 fin a fin 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.

Sigue 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, Integración de CI/CD para el detalle de implementación en Integración de CI/CD, y Acciones de GitHub Integración para los detalles de implementación en Acciones de GitHub Integración.

Actualizaciones en vivo para aplicaciones Capacitor

Cuando haya un error de capa web en vivo, envíe la corrección a través de Capgo en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios reciben la actualización en segundo plano mientras los cambios nativos siguen en el camino de revisión normal.

Iniciar Ahora

Últimas noticias de nuestro Blog

Capgo le da las mejores perspectivas que necesita para crear una aplicación móvil verdaderamente profesional.