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 personalizadas en varias 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 iOS, Android y plataformas web. Al ajustar los scripts de compilación, puedes:

  • Mejorar el tiempo de actualización: Publica cambios instantáneamente sin demoras en las tiendas de aplicaciones.
  • Controlar los despliegues: Revertir actualizaciones o dirigir actualizaciones a grupos de usuarios específicos.
  • Seguridad de la aplicación: Utilice la cifrado para proteger actualizaciones.
  • Optimizar compilaciones: Ajuste las configuraciones para necesidades específicas de plataforma.

Resumen rápido de características clave:

  • Archivos de configuración: Utilice capacitor.config.json y package.json para gestionar las configuraciones de compilación.
  • Scripts personalizados: Agregue tareas de precompilación y postcompilación para automatizar.
  • Hooks de compilación: Ejecute code durante etapas específicas del proceso de compilación.
  • Variables de entorno: Simplify environment-specific builds with .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 sus scripts de compilación para la máxima eficiencia.

Introduciendo Capacitor Configurar

Capacitor Documentación del sitio web del marco de trabajo

Proceso de Compilación Predeterminado en Capacitor

Es crucial comprender cómo Capacitor maneja su proceso de compilación predeterminado para personalizarlo de manera efectiva. A continuación, se desglosará el proceso de compilación del 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. A continuación, se muestra qué ocurre durante el proceso de compilación predeterminado:

FaseDescripciónSalida
Compilación WebCompila activos web utilizando herramientas de tu marco de trabajoBundel web optimizado
Copiar ActivosMueve activos web a carpetas de plataforma nativaDirectorios de activos específicos de plataforma
Compilación nativaEjecuta comandos de compilación específicos de plataformaBinarios listos para desplegar
VerificaciónVerifica la integridad y dependencias de la compilaciónEstado de compilación y advertencias

Archivos de configuración principales

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: Indica dónde Capacitor debe buscar los activos web (por ejemplo, dist).
  • plugins: Te permite configurar ajustes específicos del plugin, como opciones de pantalla de bienvenida.

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 dice a Capacitor dónde ubicar tus activos web compilados para su inclusión en las compilaciones nativas.
  • Después de realizar cambios en capacitor.config.json, debes ejecutar cap sync para asegurarte de que tus proyectos nativos estén actualizados.

A continuación, exploraremos cómo puedes modificar estos ajustes para personalizar aún más tus compilaciones.

Modificando Scripts de Compilación

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

Configuración del Archivo

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

Aquí hay algunas configuraciones clave que puede modificar:

  • webDir : especifica la ubicación de 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 Scripts de NPM

Para simplificar su flujo de trabajo, agregue scripts de NPM personalizados a su package.json archivo. Aquí hay 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 termine 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 ganchos de compilación.

Configuración de ganchos de compilación

Para un control más avanzado, utiliza ganchos 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 ganchos de compilación, puedes:

  • Validar requisitos antes de que comience la compilación
  • Transformar activos durante el proceso
  • Activar notificaciones en puntos clave
  • Actualizar números de versión automáticamente
  • Ejecutar pruebas automatizadas sin problemas

Esta aproximación te da mayor flexibilidad y control sobre todo el ciclo de construcción.

Personalización de Construcción Avanzada

Cuando trabajas en proyectos más grandes, afinar tu proceso de construcción puede hacer una gran diferencia. Aquí está cómo manejar construcciones 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 construcción para cargar el archivo apropiado según el entorno:

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

Puedes afinar aún más estos ajustes para que coincidan con los requisitos específicos de plataforma.

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

Construcciones Específicas de Plataforma

Para personalizar las construcciones para Android e iOS, utiliza la siguiente estructura:

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

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

Característica

targetLanguageAndroidiOS
Simbolos de depuraciónProGuard archivos de mapeoarchivos dSYM
Variantes de compilacióndepuración, producción, etapadepuración, producción
Code FirmaAdministración de keystorePerfiles de provisión
Gestión de Activosoptimización de res/drawableCatálogos de activos

Para optimizar aún más tus compilaciones, ten en cuenta lo siguiente:

  • Usar actualizaciones parciales para ahorrar tiempo durante las implementaciones
  • Configurar la detección de errores para identificar rápidamente problemas
  • Crear sistemas de canales para pruebas de versiones beta
  • Habilitar 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 implementación [1].

Problemas y soluciones de Script de compilación

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

Solución de errores comunes

Muchos problemas con los scripts de compilación surgen de la configuración del entorno o de problemas de dependencias. Aquí’s cómo abordar algunos de los más comunes:

Variables de Entorno Faltantes

Si encuentra un error como este:

error: Cannot find environment configuration for BUILD_ENV

Puede solucionarlo creando un .env.local archivo en el directorio raíz de su proyecto. Aquí’s un ejemplo:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fallos de Compilación Específicos de Plataforma

Para errores de firma de Android, utilice 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 ErrorCausa ComúnSolución
Configuración de FirmaDetalles del keystore faltantesEstablecer KEYSTORE_PATH y credenciales
Entorno de compilaciónVariables no definidasCrear archivos específicos de plataforma .env Dependencias
Incompatibilidades de versiónActualizary sincronizar package.json Después de aplicar las correcciones, asegúrese de que sus cambios sean sólidos ejecutando pruebas de compilación exhaustivas.

__CAPGO_KEEP_0__

Pruebas de scripts de compilación

Una vez que se resuelven 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 problemas potenciales 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 __CAPGO_KEEP_0__ Panel de control de actualizaciones en vivo de la interfaz

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

Capgo takes build scripts to the next level with automated deployment, enhancing efficiency and simplifying the process.

__CAPGO_KEEP_0__’s rendimiento de actualización es impresionante:

Capgo

  • 95% de 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 ancho de banda y acelera el proceso de actualización. Además, todo el proceso de compilación está completamente automatizado, lo que ahorra tiempo y esfuerzo.

Automatización de Construcción

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

Plataforma CI/CDCaracterísticas de IntegraciónBeneficios
GitHub AccionesAutomatización de compilaciones, Desencadenantes de despliegueDespliegue continuo
GitLab CIAutomatización de pipeline, Control de versionesFlujo de trabajo simplificado
JenkinsFlujos de trabajo personalizados, Ganchos de compilaciónEscalable para empresas

Configurar una compilación automática suele costar alrededor de $300 por mes, lo cual 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:

  • Cifrado 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áneas.
  • Seguimiento de versiones de despliegue.
  • Gestión de canales de actualización para lanzamientos escalonados.

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

Capgo’s sistema de canales 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

Vista general de los pasos de compilación

Los scripts de compilación personalizados permiten la automatización y la consistencia de las implementaciones mediante la utilización de atajos de compilación, variables de entorno y comandos específicos de plataforma. Estos procesos crean una base sólida para las mejoras de implementación posibles gracias a Capgo.

Capgo Ventajas

Capgo simplifica la implementación, 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 implementación.

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 características apoya actualizaciones dirigidas, pruebas de beta y cumplimiento con las directrices de las tiendas de aplicaciones, manteniendo un marco de seguridad sólido.

Actualizaciones en vivo para aplicaciones Capacitor

Cuando un error de capa web está en vivo, envíe la corrección a través de Capgo en lugar de esperar días a 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.

Comienza ahora

Últimas noticias de nuestro Blog

Capgo te brinda las mejores herramientas para crear una aplicación móvil verdaderamente profesional.