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.

Aprende a personalizar tus 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:

  • Acelerar las actualizaciones: Publica cambios instantáneamente sin retrasos de tiendas de aplicaciones.
  • Controlar los despliegues: Revertir actualizaciones o dirigir grupos de usuarios específicos.
  • Seguridad de la aplicaciónUse : cifrar actualizaciones para protegerlas.
  • Optimizar compilaciones: Ajustar 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 ajustes de compilación.
  • Scripts personalizados: Agregue tareas de precompilación y postcompilación para automatizar.
  • Hook de compilación: Ejecute code durante etapas específicas del proceso de compilación.
  • Variables de EntornoSimplifica los compilados específicos del entorno con .env archivos.

Capgouna herramienta de despliegue, mejora este proceso con actualizaciones automáticasSigue leyendo para aprender a configurar y personalizar tus scripts de compilación para una mayor eficiencia.

Introducing Capacitor __CAPGO_KEEP_0__

Documentación del sitio web del marco de trabajo Capacitor

Proceso de compilación predeterminado en Capacitor

Entender cómo Capacitor maneja su proceso de compilación predeterminado es crucial si deseas personalizarlo de manera efectiva. A continuación, romperemos 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 compilados específicos 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 Bundled web optimizado
Copia de activos Mueve activos web a carpetas de plataforma nativa Directorios de activos específicos de plataforma
Compilación nativa Directorios de activos específicos de plataforma Compila instrucciones de plataforma específicas
Verification Verifica la integridad y las dependencias del build Estado de construcción y advertencias

Estado de la compilación y advertencias

Two key configuration files shape how Capacitor handles your builds:

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
    }
  }
}
  • appIdUn 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 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 indica a Capacitor dónde localizar tus activos web compilados para su inclusión en las compilaciones nativas.
  • Después de hacer cambios en capacitor.config.json, debes ejecutar cap sync para asegurarte de que tus proyectos nativos se actualicen.

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

Modificando Scripts de Construcción

Puede personalizar el proceso de compilación predeterminado de Capacitor para adaptarlo a las necesidades de su proyecto.

Configuración de Archivos

Puedes ajustar el proceso de construcción editando el capacitor.config.json file. Below is an example configuration:

{
  "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 puedes modificar:

  • webDir: Especifica la ubicación de los activos web compilados.
  • serverConfigura el servidor de desarrollo, incluyendo el hostname y los permisos de navegación.
  • android/ios: Permite configuraciones de construcción específicas de plataforma, como detalles de keystore para Android o opciones de provisión para iOS.

Creación de Scripts de NPM

Para simplificar tu flujo de trabajo, agrega scripts de NPM personalizados a tu package.json archivo. Aquí está 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 finalice 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 trampas de compilación.

Configuración de trampas 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. 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 trampas 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

Este enfoque te da mayor flexibilidad y control sobre todo el ciclo de compilación.

Personalización de Compilaciones Avanzadas

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

Variables de Entorno

Establezca variables de entorno creando archivos separados .env archivos para cada entorno:

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

Puedes ajustar aún más estos ajustes para que se adapten a los requisitos específicos de la 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'
          }
        }
      }
    }
  }
});

Puede ajustar aún más estos ajustes para adaptarlos a las necesidades específicas de cada plataforma.

Edición de Compilaciones Específicas de Plataforma

Para personalizar los builds 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, garantizando despliegues más suaves.

Funcionalidad Android iOS
Simbolos de depuración ProGuard archivos de mapa archivos dSYM
Variantes de compilación depuración, producción, etapa depuración, producción
Code Firma Administración de keystore perfiles de provisión
Administración de Recursos optimización de recursos/dibujo catálogos de recursos

Algunos consejos adicionales para optimizar tus compilaciones incluyen:

  • Usar actualizaciones parciales para ahorrar tiempo durante las implementaciones
  • Configurar el 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

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

Cuando trabajes con configuraciones de compilación personalizadas, es fundamental resolver errores rápidamente para mantener el proceso de compilación fluido.

Solución de Errores Comunes

Muchos problemas con los scripts de compilación surgen de la configuración del entorno o problemas de dependencias. Aquí se presentan algunas soluciones 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 Fallas de Compilación Específicas de Plataforma

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fallos de Compilación Específicos de Plataforma

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

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

Intenta esto para problemas de perfil de provisión de iOS:

npx cap build ios --configuration=release --type=development
Causa Común Causa Común Solution
Variables de Entorno Faltantes Detalles de keystore faltantes Establecer KEYSTORE_PATH y credenciales
Entorno de compilación Variables no definidas Crear específico de plataforma .env Archivos
Dependencias Incompatibilidades 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.

Pruebas de scripts de compilación

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

  • Verificación Automatizada: 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 atrapar 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:

  • Utilice Docker Docker para aislar las compilaciones.
  • Verifique los archivos de configuración antes de iniciar el proceso.
  • Prueba con múltiples Node.js versions.
  • Verifique que se cumplan los requisitos específicos de la plataforma.
  • Mantenga una mirada en la rendimiento de la compilación para posibles mejoras.

Capgo Características de compilación

Capgo Live Update Interfaz de la consola

Capgo lleva los scripts de compilació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 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 Automated builds, Deploy triggers Despliegue continuo
GitLab CI Automatización de pipeline, Control de versiones Flujo de trabajo simplificado
Jenkins Flujos de trabajo personalizados, Ganchos de compilación Escalable para empresas

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

  • Cifrado 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á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.

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

Resumen

Resumen de Pasos de Construcción

Los scripts de compilación personalizados permiten la automatización y la consistencia de las implementaciones aprovechando las funciones de compilación, las variables de entorno y los comandos específicos de plataforma. Estos procesos crean una sólida base para mejorar las implementaciones de despliegue posibles con Capgo.

Beneficios de Capgo

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 actualización parcial reduce tanto el uso 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 características apoya las actualizaciones dirigidas, la prueba de beta y la conformidad con las directrices de las tiendas de aplicaciones mientras mantiene un marco de seguridad sólido.

Sigue leyendo 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 CI/CD para el flujo de trabajo del producto en Capgo CI/CD, Capgo Construcciones Nativas para el flujo de trabajo del producto en Capgo Construcciones Nativas, Capgo Integraciones para el flujo de trabajo del producto en Capgo Integraciones, Integración CD/CI para los detalles de implementación en la Integración CI/CD, y GitHub Integración de Acciones para los detalles de implementación en GitHub Integración de Acciones.

Live updates for Capacitor apps

Cuando hay un error en la capa web, envía 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.

Últimas noticias de nuestro Blog

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