Parcel Cheatsheet

Traduzione:

__HTML_TAG_68_Parcel - Lo strumento di configurazione zero_HTML_TAG_69__ __HTML_TAG_70_ Parcel è un bundler di applicazioni web, differenziato dalla sua esperienza di sviluppo. Offre prestazioni veloci blazing utilizzando elaborazione multicore, e richiede zero configurazione. __HTML_TAG_71_ Traduzione: __HTML_TAG_73_ __HTML_TAG_74_📋 Copia Tutti i comandi_HTML_TAG_75__ 📄 Generare PDF__HTML_TAG_77_ __HTML_TAG_78_ __HTML_TAG_79_ ## Tavola dei contenuti - [Installazione](#installazione) [Getting Started](#getting-started) - [Struttura progetto](#struttura progetto) - [Server di sviluppo](#server di sviluppo) - [Building for Production](#building-for-produzione) - [Asset Types](#asset-types) - [Trasformazioni](#trasformazioni) - [Codice Splitting](#code-splitting) - [Sostituzione del modulo Hot](#hot-module-sostituto) - [variabili ambientali](#variabili ambientali) [Plugins](#plugins) - [Configurazione](#configurazione) - [Ottimizzazione](#ottimizzazione) - No. - [Caching](#caching) - [Source Maps](#source-maps) - [Analisi Bundle] - (Migrazione) [Le migliori pratiche](#best-practices) ## Installazione ### Installazione globale Traduzione: ### Installazione locale (consigliato) Traduzione: ### Package.json Scripts Traduzione: # ### Basic HTML Punto di ingresso Traduzione: # JavaScript di base Entrata Traduzione: ### Basic CSS Traduzione: ### Run Development Server Traduzione: ## Struttura del progetto ### Tipico progetto Parcel Traduzione: ### Multiple Entry Points Traduzione: ### Library Project Structure Traduzione: ## Development Server ### Sviluppo di base Server Traduzione: ### Opzioni del server di sviluppo Traduzione: ### Configurazione proxy # ## Edificio per la produzione ### Basic Production Build Traduzione: ## # Configurazione di compilazione Traduzione: #### Ottimizzazione della produzione Traduzione: ## Asset Types ### JavaScript e TypeScript Traduzione: ## CSS e Preprocessori Traduzione:

// SCSS
@import './variables';

.component {
  background: $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

// Less
@import './variables.less';

.component {
  background: @primary-color;

  &:hover {
    background: darken(@primary-color, 10%);
  }
}

### Images and Assets Traduzione: ### Fonts Traduzione: ## JSON and Data Files Traduzione: ## Transformations ## Configurazione di Babele Traduzione: ## PostCSS # Configurazione Traduzione: ### Configurazione script Traduzione: # Riattiva configurazione Traduzione: ### Configurazione Vue Traduzione: ## Codice Spalato ### Importazioni dinamiche Traduzione: ### Bundle Spliting # Traduzione: ### Spalato basato sul percorso Traduzione: ## Sostituzione del modulo caldo ### HMR in JavaScript Traduzione: # Reagisci HMR Traduzione: ## CSS HMR Traduzione: ## Variabili dell'ambiente #### Utilizzo delle variabili ambientali # ### .env Files Traduzione:

# .env.development
API_URL=http://localhost:3000
DEBUG=true

# .env.production
API_URL=https://api.production.com
DEBUG=false

#### Ambiente-specifico Costruzioni Traduzione: # Plugin # ### Installazione dei plugin Traduzione: ## Configurazione del plugin Traduzione: ### Plugin personalizzati Traduzione: ## Traduzione: ## Configurazione # Basic .parcelrc Traduzione: ### Configurazione avanzata Traduzione: ### Configurazione obiettivo Traduzione: ## Ottimizzazione #### Ottimizzazione della produzione Traduzione: #### Ottimizzazione delle dimensioni di Bundle Traduzione: ### Ottimizzazione immagine Traduzione: ### Ottimizzazione CSS Traduzione: ## Targets ### Sfoglia gli obiettivi Traduzione: ## Node.js Target Traduzione: ### Library Target Traduzione: ### Multiple Targets Traduzione: # Caching # ## Build Caching __________ ## HTTP Caching Traduzione: ### Cache Configuration Traduzione: ## Source Maps # Configurazione della mappa di origine Traduzione: # Tipologie della mappa di origine Traduzione: ## Analisi Bundle ### Bundle Analyzer Traduzione: # # Bundle Buddy # Traduzione: ### Analisi personalizzata Traduzione: # Migrazione # ### From Webpack Traduzione: ### From Create React App Traduzione: ### From Rollup Traduzione: ### Migration Checklist - Cosa? Rimuovere vecchi file di configurazione bundler - Cosa? Aggiornare gli script.json [ ] Installare Parcel e rimuovere il vecchio bundler - Cosa? Aggiornare i percorsi di importazione se necessario - Cosa? Configure .parcelrc se sono necessarie trasformazioni personalizzate - Cosa? Sviluppo e produzione di test - Aggiornamento delle tubazioni CI/CD # Migliori Pratiche ### Project Organization Traduzione: ## Performance Best Practices - ** Utilizzare le importazioni dinamiche** per la divisione del codice - **Ottimizzare le immagini** con formati appropriati #Minimize bundle size # # con l'albero che trema # - **Abilitare la compressione** per le costruzioni di produzione - **Utilizzare i contenuti** per il caching ### Migliori pratiche di sviluppo - ** Utilizzare HMR** per uno sviluppo più rapido - **Abilita mappe di origine** per il debug Configurare linting con ESLint e Prettier - **Utilizzare TypeScript** per una migliore esperienza di sviluppo - **Set up testing** con Jest o altri framework ### Le migliori pratiche di produzione - **Ottimizzare per i browser di destinazione** con browserslist - **Abilita tutte le ottimizzazioni** nelle costruzioni di produzione - ** Utilizzare variabili di ambiente** per la configurazione - ** Dimensione del fascio del motorino** con strumenti di analisi - **Test costruisce ** prima della distribuzione --- ## Sommario Parcel è uno strumento di configurazione zero che offre un'esperienza di sviluppo eccellente con una configurazione minima. Le caratteristiche principali includono: - **Zero Configuration**: Funziona dalla scatola per la maggior parte dei progetti - **Fast Builds**: utilizza la lavorazione multicore e il caching - **Hot Module Sostituzione**: Aggiornamenti istantanei durante lo sviluppo - **Asset Handling**: Supporta tutti i tipi di file comuni - **Code Splitting**: Dividere il codice automatico e manuale - **Tree Shaking**: Rimuove automaticamente il codice inutilizzato - **Source Maps**: Supporto mappa di origine integrata - **Ottimizzazione**: Ottimizzazione automatica della produzione Sfruttando la semplicità e la potenza di Parcel, puoi concentrarti sulla costruzione dell'applicazione piuttosto che sulla configurazione degli strumenti di costruzione, pur avendo la flessibilità di personalizzare quando necessario. __HTML_TAG_80_ copia funzioneToClipboard() {} const commands = document.querySelectorAll('code'); tutti i Comandi = ''; comandi. per ogni(cmd => AllCommands += cmd.textContent + '\n'); navigatore.clipboard.writeText(tutti iComandi); alert('Tutti i comandi copiati a clipboard!'); # funzione generaPDF() { finestra.print(); # __HTML_TAG_81_