Saltare al contenuto principale

Come personalizzare i script di costruzione con Capacitor CLI

Impara a personalizzare i tuoi script di build utilizzando Capacitor CLI per deployment efficienti e aggiornamenti di app personalizzati su piattaforme diverse.

How to Customize Build Scripts with Capacitor CLI

Capacitor CLI consente di personalizzare il processo di build per le piattaforme iOS, Android e web. Modificando i script di build, puoi:

  • Accelerare gli aggiornamenti: Invia modifiche istantaneamente senza ritardi degli store di app.
  • Gestisci le distribuzioni: Annulla gli aggiornamenti o mira a specifiche fasce di utenti.
  • Proteggere l'appUsa la crittografia per proteggere gli aggiornamenti.
  • Optimizza le costruzioni: Adjust settings for platform-specific needs.

Panoramica rapida delle principali funzionalità:

  • File di configurazione: Utilizza capacitor.config.json e package.json per gestire le impostazioni di costruzione.
  • Script personalizzati: Aggiungi compiti pre-costruzione e post-costruzione per l'automazione.
  • Hook di costruzione: Esegui code durante le fasi specifiche del processo di costruzione.
  • Variabili di ambiente: Semplifica le costruzioni specifiche dell'ambiente con .env file.

Capgo, un tool di distribuzione, migliora questo processo con __CAPGO_KEEP_0__Seguiamo la guida per imparare a configurare e personalizzare i tuoi script di build per massimizzare l'efficienza.

Introducing Capacitor Configure

Documentazione del sito web del framework Capacitor

Processo di costruzione predefinito in Capacitor

Capire come Capacitor gestisce il suo processo di costruzione predefinito è fondamentale se desiderate personalizzarlo efficacemente. Di seguito, ci occuperemo di analizzare il processo di costruzione del Capacitor CLI e i suoi file di configurazione chiave.

Passaggi di costruzione standard

Capacitor utilizza un processo passo dopo passo per trasformare la tua app web in build specifiche per piattaforma. Ecco cosa accade durante il processo di build predefinito:

Fase Descrizione Output
Costruzione web Compila gli asset web utilizzando le tue strumentazioni di framework Bundle web ottimizzato
Copia Assets Sposta gli asset web nelle cartelle native delle piattaforme Directory degli asset specifici della piattaforma
Costruzione nativa Runs platform-specific build commands Binari pronti per la distribuzione
Verification Controlla l'integrità e le dipendenze del costrutto Stato e avvisi di costruzione

File di configurazione principali

Due a due file di configurazione chiave, Capacitor gestisce i tuoi build in questo modo:

capacitor.config.json
Questo è il file di configurazione principale per il tuo progetto Capacitor. Imposta parametri importanti per le tue compilazioni:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appIdUn identificatore univoco per l'applicazione.
  • appName: Il nome del tuo app.
  • webDir: Specifica dove Capacitor deve cercare gli asset web (ad esempio, dist).
  • pluginsConsente di configurare le impostazioni specifiche del plugin, come ad esempio le opzioni per lo schermo di attesa.

package.json
Questo file include script di costruzione e dipendenze che influenzano il processo di costruzione.

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • La webDir impostazione in capacitor.config.json indica a Capacitor dove localizzare gli asset web compilati per l'inclusione nei build nativi.
  • Dopo aver apportato modifiche a capacitor.config.json, è necessario eseguire cap sync per assicurarsi che i progetti nativi siano aggiornati.

Successivamente, esploreremo come puoi modificare queste impostazioni per personalizzare ulteriormente i tuoi build.

Modificare i Script di Costruzione

Puoi personalizzare il processo di compilazione di Capacitor per adattarlo meglio alle tue esigenze progettuali.

Impostazioni del File di Configurazione

Puoi modificare il processo di costruzione modificando il capacitor.config.json file. Ecco un esempio di configurazione:

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

Ecco alcune impostazioni chiave che puoi modificare:

  • webDir: Specifica la posizione dei tuoi asset web compilati.
  • serverConfigura il server di sviluppo, compreso il nome host e le autorizzazioni di navigazione.
  • android/iosConsente impostazioni di compilazione specifiche per piattaforma, come dettagli del keystore per Android o opzioni di provisioning per iOS.

Creazione di Script NPM

Per semplificare il tuo workflow, aggiungi script personalizzati NPM al package.json file. Ecco un esempio:

{
  "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 e postbuild: Utilizza questi per compiti come l'installazione dell'ambiente o l'invio di notifiche quando il build è completato.
  • build:platformComandi specifici per piattaforma per la creazione di app Android o iOS.

Puoi portare l'automazione ancora più avanti aggiungendo gli hook di build.

Gestione degli Hook di Build

Per un controllo più avanzato, utilizza gli hook di build per eseguire code personalizzati in punti specifici del processo di build. Ecco un esempio di configurazione in 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;

Grazie agli hook di build, puoi:

  • Verifica le richieste prima che il build inizi
  • Trasforma gli asset durante il processo
  • Attiva le notifiche in punti chiave
  • Aggiorna automaticamente i numeri di versione
  • Esegui test automatizzati senza problemi

Questa approccio offre una maggiore flessibilità e controllo sul ciclo di costruzione completo.

Personalizzazione Avanzata del Costrutto

Lavorando su progetti più grandi, l'ottimizzazione del processo di costruzione può fare una grande differenza. Ecco come gestire costruzioni specifiche per ambiente e personalizzare le piattaforme in modo efficace.

Variabili di Ambiente

Impostare le variabili di ambiente creando separati .env Poi, configura lo script di costruzione per caricare il file appropriato in base all'ambiente:

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

Puoi ulteriormente regolare questi impostazioni per adattarle alle esigenze specifiche delle piattaforme.

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

Puoi ulteriormente personalizzare questi impostazioni per adattarle alle esigenze specifiche della piattaforma.

Costruzioni Specifiche per Piattaforma

Per personalizzare le build per Android e iOS, utilizzare la seguente struttura:

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

Queste configurazioni ti consentono di personalizzare i build per ogni piattaforma, garantendo una distribuzione più fluida.

Feature Android iOS
Simboli di debug ProGuard file di mapping file dSYM
Varianti di build debug, release, staging debug, rilascio
Code Firma Gestione del keystore Profili di provisioning
Gestione degli Asset ottimizzazione di res/drawable Cataloghi di asset

Inclusi alcuni consigli aggiuntivi per ottimizzare le tue compilazioni:

  • Using partial updates to save time during deployments
  • Configurare la tracciatura degli errori per identificare velocemente gli issue
  • Creare sistemi di canali per le versioni di testing beta
  • Abilitare la crittografia end-to-end per una distribuzione sicura

Quando abbinato a strumenti come Capgo per l'analisi e gli aggiornamenti sicuri, queste tecniche ti danno più controllo sul processo di distribuzione [1].

Problemi e Soluzioni dei Script di Compilazione

Lavorando con configurazioni di build personalizzate, è fondamentale risolvere gli errori rapidamente per mantenere il processo di build fluido.

Solve Problemi Comuni

Molti problemi relativi ai script di build derivano da impostazioni di ambiente o da problemi di dipendenza. Ecco come risolvere alcuni dei più comuni.

Variabili di ambiente mancanti

Se incontri un errore del tipo:

error: Cannot find environment configuration for BUILD_ENV

Puoi risolverlo creando un .env.local Fallimenti di costruzione specifici per piattaforma

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fallimenti di Costruzione Specifici per Piattaforma

Per problemi di profilo di provisioning iOS, prova questo:

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

Per problemi di profilo di provisioning iOS, prova questo:

npx cap build ios --configuration=release --type=development
Causa comune Soluzione Solution
Configurazione di firma Dati mancanti della chiave di sicurezza Configura KEYSTORE_PATH Dati mancanti di configurazione
Ambiente di costruzione Variabili non definite Creare file specifici per piattaforma .env File
Dipendenze Discrepanze di versione Aggiorna package.json e sincronizza

Dopo aver applicato le correzioni, assicurati che le tue modifiche siano solide eseguendo test di build approfonditi.

Esegui Script di Costruzione

Esegui questi passaggi per validare i tuoi script di costruzione dopo aver risolto gli errori:

  • Verifica Automatica: Esegui comandi chiave per confermare che il processo di costruzione funziona come previsto.
npm run build
npx cap sync
npx cap copy
  • Validazione Ambiente: Controlla le variabili di ambiente mancanti prima di iniziare la costruzione.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Debugging Script di Costruzione: Aggiungi script dettagliati per catturare potenziali problemi durante la costruzione.
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Suggerimenti aggiuntivi per la prova:

  • Usa Docker contenitori per isolare le build.
  • Verifica i file di configurazione prima di iniziare il processo.
  • Testa con più versioni di Node.js versions.
  • Verifica che siano soddisfatte le specifiche del sistema.
  • Mantieni d'occhio le prestazioni di costruzione per eventuali miglioramenti.

Capgo Costruisci Funzionalità

Capgo Live Update Interfaccia di Dashboard

Capgo porta i script di costruzione al livello successivo con la distribuzione automatica, migliorando l'efficienza e semplificando il processo.

Aggiornamenti Rapidi delle Applicazioni

Capgo's prestazioni di aggiornamento sono impressionanti:

  • 95% degli utenti attivi ricevono aggiornamenti entro 24 ore.
  • 82% di successo per la consegna di aggiornamenti in tutto il mondo
  • Un tempo di risposta medio di API di 434ms a livello globale.

Il piattaforma utilizza aggiornamenti parziali, il che significa che solo le modifiche vengono scaricate. Questo approccio riduce l'uso di banda e accelera il processo di aggiornamento. Inoltre, tutto il processo di costruzione è completamente automatizzato, risparmiando tempo e sforzo.

L'Automazione di Costruzione

Capgo funziona in modo trasparente con le principali piattaforme CI/CD, offrendo una varietà di integrazioni:

Piattaforma CI/CD Caratteristiche di integrazione Benefici
GitHub Azioni Costruzione automatica, Triggers di distribuzione Distribuzione continua
GitLab CI Automazione delle pipeline, Controllo delle versioni Flusso di lavoro semplificato
Jenkins Flussi di lavoro personalizzati, Hook di costruzione Scalabile per le aziende

Impostare una costruzione automatizzata tipicamente costa circa $300 al meseche è molto più conveniente rispetto alle soluzioni tradizionali che possono arrivare fino a $6,000 annualmente.

Standard di Sicurezza

Capgo dà priorità alla sicurezza con un robusto framework che include:

  • La crittografia end-to-end per i pacchetti di aggiornamento.
  • Gestione delle chiavi sicure.
  • Conformità con le linee guida di Apple e Google.

Caratteristiche di Controllo delle Versioni

  • Opzioni di rollback istantanee.
  • Tracciamento delle versioni di distribuzione.
  • Gestione del canale di aggiornamento per rilasci in fase di testing.

Questo framework di sicurezza è stato rigorosamente testato su centinaia di applicazioni aziendali. Per le squadre che hanno bisogno di ulteriore sicurezza, Capgo offre anche soluzioni auto-hosted con configurazioni personalizzabili.

Il sistema di canali di Capgo consente una distribuzione flessibile degli aggiornamenti. I sviluppatori possono destinare versioni diverse a gruppi di utenti specifici, ideale per test beta o rilasci graduati.

Riepilogo

Panoramica delle fasi di costruzione

Il supporto alle scritture di costruzione personalizzate consente l'automazione e la consistenza delle distribuzioni mediante l'utilizzo di hook di costruzione, variabili di ambiente e comandi specifici per piattaforma. Questi processi creano una solida base per miglioramenti delle distribuzioni resi possibili con Capgo.

Benefici di Capgo

Capgo semplifica la distribuzione, avendo già consegnato oltre 23,5 milioni di aggiornamenti su 750 app di produzione [1]Il suo sistema di aggiornamento parziale riduce sia l'uso di banda che il tempo di distribuzione.

Il platform fornisce aggiornamenti veloci, ottimizzazione della prestazione globale, crittografia end-to-end per la sicurezza e un sistema di distribuzione basato su canali flessibile. Questo setup supporta aggiornamenti mirati, test beta e conformità con le linee guida degli store di app, mantenendo un solido framework di sicurezza.

Continua da Come personalizzare le scritture di costruzione con Capacitor CLI

Se stai utilizzando Come personalizzare le scritture di costruzione con Capacitor CLI per pianificare l'automazione CI/CD, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo CI/CD, Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native, Capgo Integrazioni per il workflow del prodotto nelle Capgo Integrazioni Integrazione CI/CD per i dettagli di implementazione nella integrazione CI/CD, e GitHub Actions Integration per i dettagli di implementazione in GitHub Azioni di integrazione.

Aggiornamenti in tempo reale per le app Capacitor

Quando un bug nel layer web è attivo, invia la correzione attraverso Capgo invece di attendere giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Ultimi articoli dal nostro Blog

Capgo ti dà le migliori informazioni che ti servono per creare un'app mobile veramente professionale.