Saltare al contenuto principale

How to Customize Build Scripts with Capacitor CLI

Learn how to customize your build scripts using Capacitor CLI for efficient deployments and tailored app updates across platforms.

How to Customize Build Scripts with Capacitor CLI

Capacitor CLI lets you customize your app’s build process for iOS, Android, and web platforms. By tweaking build scripts, you can:

  • Accelerare gli aggiornamenti: Invia le modifiche istantaneamente senza ritardi degli store di app.
  • Controlla le distribuzioni: Annulla gli aggiornamenti o mira a specifiche gruppi di utenti.
  • Proteggere l'app: Utilizza l'encryption per proteggere gli aggiornamenti.
  • Optimizza le costruzioni: Regola le impostazioni per le esigenze specifiche delle piattaforme.

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.

: Capgouna tool di distribuzione, migliora questo processo con aggiornamenti automatizzati, tracciamento delle versioni e ottimizzazione della prestazione globale. Continua a leggere per imparare a configurare e personalizzare i tuoi script di costruzione per massimizzare l'efficienza.

Introduzione Capacitor Configura

Capacitor Framework Documentation Website

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 della Capacitor CLI e i suoi file di configurazione chiave.

Passaggi di costruzione standard

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

Fase Descrizione Output
Costruzione Web Compila gli asset web utilizzando gli strumenti del tuo framework Bundle web ottimizzato
Copia Assets Sposta gli asset web nelle cartelle delle piattaforme native Directory di asset specifiche della piattaforma
Costruzione Nativa Esegue comandi di costruzione specifici della piattaforma Binari pronti per la distribuzione
Verifica Controlla l'integrità e le dipendenze della costruzione Stato e avvisi di costruzione

File di configurazione principali

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 identificatore univoco per la tua app.
  • appName: Il nome della tua app.
  • webDir: Specifies where Capacitor should look for the web assets (e.g., dist).
  • plugins: Consente di configurare impostazioni specifiche per plugin, come le opzioni per lo schermo di benvenuto.

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

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • : Il webDir : impostazione in capacitor.config.json informa Capacitor dove trovare i tuoi asset web compilati per l'inclusione nei build nativi.
  • Dopo aver apportato modifiche a capacitor.config.jsonper assicurarti che i tuoi progetti nativi siano aggiornati. cap sync Proseguendo, esploreremo come puoi modificare questi impostazioni per personalizzare ulteriormente i tuoi build.

Modificare i Script di Costruzione

Puoi modificare il processo di costruzione predefinito di __CAPGO_KEEP_0__ per adattarlo meglio alle tue esigenze di progetto. Ecco come:

You can tweak Capacitor’s default build process to better suit your project needs. Here’s how:

Puoi modificare il processo di costruzione modificando il

file. Ecco un esempio di configurazione: capacitor.config.json Ecco alcune impostazioni chiave che puoi modificare:

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

: specifica dove sono ubicati i tuoi asset web compilati.

  • webDirfile. Ecco un esempio di configurazione:
  • server: Configura il server di sviluppo, compreso il nome host e le autorizzazioni di navigazione.
  • android/ios: Consente impostazioni di build 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 NPM personalizzati al tuo 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 la configurazione dell'ambiente o l'invio di notifiche quando il build è completato.
  • build:platform: Comandi specifici per piattaforma per la creazione di app Android o iOS.

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

Hooks di Build

Per un controllo più avanzato, utilizza gli hook di build per eseguire script 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;

Con gli hook di build, puoi:

  • Verifica le richieste prima dell'avvio della costruzione
  • Trasforma gli asset durante il processo
  • Attiva le notifiche in punti chiave
  • Aggiorna i numeri di versione automaticamente
  • Esegui test automatizzati senza problemi

Questa approccio ti offre maggiore flessibilità e controllo sul ciclo di vita della costruzione.

Personalizzazione di costruzione avanzata

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

Variabili di ambiente

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

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

files for each environment: __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'
          }
        }
      }
    }
  }
});

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

Costruzioni specifiche della piattaforma

Per personalizzare le costruzioni per Android e iOS, utilizza 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 consentono di personalizzare le costruzioni per ogni piattaforma, garantendo una distribuzione più fluida.

Caratteristica Android iOS
Simboli di debug ProGuard file di mapping file dSYM
Varianti di costruzione debug, release, staging debug, release
Code Firma Gestione del keystore Gestione dei profili di provisioning
Gestione degli asset ottimizzazione di res/drawable Gestione dei cataloghi degli asset

Ulteriori consigli per l'ottimizzazione dei build includono:

  • Utilizzare aggiornamenti parziali per risparmiare tempo durante le distribuzioni
  • Configurare la tracciatura degli errori per identificare velocemente le problematiche
  • Creare sistemi di canali per le versioni di testing beta
  • Abilitando la crittografia end-to-end per una distribuzione sicura

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

Problemi e soluzioni di script di costruzione

Quando si lavora con configurazioni di costruzione personalizzate, risolvere gli errori velocemente è cruciale per mantenere il processo di costruzione in esecuzione senza problemi

Sovraintendere gli errori comuni

Molti problemi di script di costruzione derivano da problemi di configurazione dell'ambiente o di dipendenze. Ecco come affrontare alcuni di essi:

Variabili di ambiente mancanti

Se si incontra un errore del tipo:

error: Cannot find environment configuration for BUILD_ENV

Si può risolvere creando un file nella directory radice del progetto. Ecco un esempio: .env.local Fallimenti di costruzione specifici della piattaforma

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Per gli errori di firma Android, utilizzare il comando:

Si prega di notare che i comandi sono in inglese, ma sono stati lasciati invariati per mantenere la loro autenticità.

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
Tipo di Errore Causa Comune Soluzione
Configurazione di firma Dettagli del keystore mancanti Imposta KEYSTORE_PATH e credenziali
Ambiente di costruzione Variabili non definite Crea file specifici per piattaforma .env file specifici per piattaforma
Dipendenze Disparità di versione Aggiorna package.json e sincronizza

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

Testa i script di build

Una volta risolti gli errori, valuta i tuoi script di build con questi passaggi:

  • Verifica automatica: Esegui comandi chiave per confermare che il processo di build funziona come previsto.
npm run build
npx cap sync
npx cap copy
  • Validazione dell'ambiente: Controlla le variabili di ambiente mancanti prima di avviare il build.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Debugging dei script di build: Aggiungi dettagliati script 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"
  }
}

Ulteriori consigli per la prova:

Capgo Caratteristiche di costruzione

Capgo Dashboard di aggiornamento in tempo reale dell'interfaccia

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

Aggiornamenti veloci delle applicazioni

Capgo presenta un'ottima prestazione degli aggiornamenti:

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

La 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.

Automazione dei costruzioni

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

Piattaforma CI/CD Caratteristiche di integrazione Benefici
GitHub Actions __CAPGO_KEEP_0__ Azioni Costruzioni automatizzate, Trigger di distribuzione
Distribuzione continua GitLab CI Automazione della pipeline, Controllo delle versioni
Flusso di lavoro semplificato Flussi personalizzati, Hook di costruzione Scalabile per le aziende

La configurazione di un'automazione di costruzione tipicamente costa circa $300 al mese, il che è molto più conveniente rispetto alle soluzioni tradizionali che possono arrivare fino a $6,000 all'anno.

Standard di Sicurezza

Capgo pone l'accento sulla sicurezza con un robusto framework che include:

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

Caratteristiche di Controllo delle Versioni

  • Opzioni di rollback istantaneo.
  • Tracciamento della versione di distribuzione.
  • Gestione del canale di aggiornamento per rilasci in fase di staging.

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 self-hosted con configurazioni personalizzabili.

Lo sistema di canali di Capgo rende la distribuzione degli aggiornamenti flessibile. Gli sviluppatori possono destinare gruppi di utenti specifici con versioni diverse, perfetto per i test beta o i rilasci graduati.

Riepilogo

Panoramica dei passaggi di costruzione

Gli script di costruzione personalizzati consentono deployment automatizzati e coerenti utilizzando le funzionalità di hook di costruzione, le variabili di ambiente e i comandi specifici della piattaforma. Questi processi creano una solida base per miglioramenti di deployment resi possibili con Capgo.

Benefici di Capgo

Capgo semplifica il deployment, avendo già consegnato con successo 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 deployment.

La piattaforma 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 i script di build con Capacitor CLI

Se stai utilizzando Come personalizzare i script di build con Capacitor CLI per pianificare l'automazione CI/CD, connettilo con Capgo automazione CI/CD per il workflow del prodotto in Capgo automazione CI/CD, Capgo Costruzioni native per il workflow del prodotto in Capgo Costruzioni native, Capgo Integrazioni per il workflow del prodotto in Capgo Integrazioni, Integrazione CI/CD per l'integrazione di implementazione dettagli in Integrazione CI/CD, e GitHub Azioni di integrazione per i dettagli di implementazione in GitHub Azioni di integrazione.

Aggiornamenti in tempo reale per le app Capacitor

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

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

Contesto: Pagina/area: Sito web di marketing Capgo. Ruolo: Descrizione di supporto o meta descrizione. Visto in: componente GetStarted.astro. Preservare i termini del prodotto/marca Capgo e i termini del developer esattamente. Chiave del messaggio `instant_updates_for_capacitor_apps_description` (Descrizione degli aggiornamenti in tempo reale per le app Capacitor).

Supporto umano da Martin

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