Pasar al contenido principal

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

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

Martin Donadieu

Martin Donadieu

Especialista en 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 modificar los scripts de compilación, puedes:

  • Acelerar las actualizaciones: Publicar cambios de manera instantánea sin retrasos de tiendas de aplicaciones.
  • Controlar las implementaciones: Revertir actualizaciones o dirigir actualizaciones a grupos de usuarios específicos.
  • Segurar tu aplicación: Utilizar cifrado para proteger las actualizaciones.
  • Optimizar las compilaciones: Ajustar configuraciones para necesidades específicas de cada plataforma.

Resumen Rápido de Características Clave:

  • Archivos de Configuración: Utilice capacitor.config.json y package.json para gestionar los ajustes de compilación.
  • Scripts Personalizados: Agregue tareas de precompilación y postcompilación para automatizar.
  • Hook de Compilación: Ejecute code durante las etapas específicas del proceso de compilación.
  • Variables de Entorno: Simplifique las compilaciones específicas del entorno con .env archivos.

CapgoUna herramienta de implementación protegida, __CAPGO_KEEP_0__ mejora este proceso con actualizaciones automáticas, seguimiento de versiones y optimización de rendimiento global. Sigue leyendo para aprender a configurar tus scripts de compilación para una mayor eficiencia.

Introducción a __CAPGO_KEEP_0__ Configuración de Capacitor Documentación del sitio web del marco de trabajo de __CAPGO_KEEP_0__

Capacitor Framework Documentation Website

Entender 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 y los archivos de configuración clave del __CAPGO_KEEP_1__ __CAPGO_KEEP_2__

Understanding how Capacitor handles its default build process is crucial if you want to customize it effectively. Below, we’ll break down the Capacitor CLI’s build process and its key configuration files.

__CAPGO_KEEP_1__ __CAPGO_KEEP_2__

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 marco de trabajo Bundle web optimizado
Copia de 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 desplegar
Verificación Verifica la integridad y dependencias del build Estado de 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 su aplicación.
  • appName: El nombre de su 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 indica a Capacitor dónde localizar los activos web compilados para su inclusión en las compilaciones nativas.
  • Después de realizar cambios en capacitor.config.json, es necesario ejecutar cap sync para asegurarse de que los proyectos nativos se actualicen.

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

Modificar Scripts de Compilación

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

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

Estos son algunos ajustes clave que puedes modificar:

  • webDir: Especifica la ubicación de tus activos web compilados.
  • 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.

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.

Puede llevar la automatización aún más lejos agregando hooks de construcción.

Configuración de Hooks de Construcción

Para un control más avanzado, utilice hooks de construcción para ejecutar code personalizados en puntos específicos durante el proceso de construcción. Aquí hay 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 construcción, puede:

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

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

Personalización de Construcción Avanzada

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

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

Puedes ajustar aún más estos ajustes para que coincidan con 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'
          }
        }
      }
    }
  }
});

Compilaciones Específicas de Plataforma

Para personalizar las compilaciones para Android y iOS, utiliza la siguiente estructura:

Estas configuraciones te permiten personalizar las compilaciones 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

Android iOS Simbolos de Depuración
Debug Symbols Protección de código archivos de mapeo archivos dSYM
Variantes de compilación depuración, lanzamiento, etapa 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 el seguimiento 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

Cuando se trabaja con configuraciones de compilación personalizadas, abordar 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 script de compilación provienen de la configuración del entorno o problemas de dependencias. Aquí’s cómo abordar algunos de los más comunes:

Variables de entorno faltantes

Si encuentras 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:

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

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

Tipo de error

npx cap build ios --configuration=release --type=development
Causa común Solución Configuración de firma
Detalles del keystore faltantes Establecer y credenciales KEYSTORE_PATH __CAPGO_KEEP_0__
Entorno de construcció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 construcción exhaustivas.

Pruebas de scripts de construcción

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

  • Verificación automáticaEjecutar comandos de tecla para confirmar que el proceso de compilación funciona como se espera.
npm run build
npx cap sync
npx cap copy
  • Validación del entornoEjecutar comandos de tecla para confirmar que el proceso de compilación funciona como se espera.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Validación de variables de entorno faltantes antes de iniciar la compilación.Depuración del script de compilación
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Agregar scripts detallados para capturar posibles problemas durante la compilación.

  • 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 Node.js versiones.
  • Confirme que se cumplen los requisitos específicos de la plataforma.
  • Mantenga un ojo en el rendimiento de la compilación para posibles mejoras.

Capgo Construya Características

Capgo Panel de control de actualizaciones en vivo

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 desempeño de actualización es impresionante:

  • 95% de los usuarios activos reciben actualizaciones dentro de 24 horas.
  • Tasa de éxito del 82% 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 compilació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 Construcción automática, disparadores de despliegue Despliegue continuo
Automatización de CI de GitLab Automatización de pipeline, Control de versiones Flujo de trabajo simplificado
Jenkins Flujos de trabajo personalizados, Ganchos de construcción Escalable para empresas

Configurar una construcción automática 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:

  • 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 etapados.

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 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 a hooks de construcción, variables de entorno y comandos específicos de plataforma. Estos procesos crean una base sólida para mejoras de despliegue posibles con Capgo.

Capgo Beneficios

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 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, mientras se 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 CI/CD para el flujo de trabajo del producto en Capgo 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 CI/CD para el detalle de implementación en Integración CI/CD, y GitHub Integración de Acciones para el detalle de implementación en GitHub Integración de Acciones.

Actualizaciones en vivo para aplicaciones Capacitor

Cuando haya un error en la 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 obtienen la actualización en segundo plano mientras los cambios nativos siguen en el camino de revisión normal.

Inicia ahora

Últimas noticias de nuestro Blog

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