Vai al contenuto

Cheatsheet di Parcel

Traduzione: - Lo strumento Zero Configuration Build

Parcel è un bundler di applicazioni web, differenziato dalla sua esperienza di sviluppo. Offre prestazioni veloci blazing utilizzando elaborazione multicore, e richiede zero configurazione. < > < >

Traduzione: Traduzione: Copia tutti i comandi Traduzione: Generare PDF < > < >

Tabella dei contenuti

Installazione

Installazione globale

Traduzione:

Installazione locale (consigliato)

Traduzione:

Package.json Scripts

Traduzione:

Iniziare

HTML di base Punto di ingresso

Traduzione:

JavaScript di base Entrata

Traduzione:

CSS di base

Traduzione:

Server di sviluppo

Traduzione:

Struttura del progetto

Progetto tipico del Parcel

Traduzione:

Punti di ingresso multipli

Traduzione:

Struttura del progetto

Traduzione:

Server di sviluppo

Server di sviluppo di base

Traduzione:

Opzioni del server di sviluppo

Traduzione:

Configurazione proxy

Edificio per la produzione

Costruzioni di produzione

Traduzione:

Costruire la configurazione

Traduzione:

Ottimizzazione della produzione

Traduzione:

Tipi di attività

JavaScript e TypeScript

Traduzione:

CSS e Preprocessori

Traduzione:

Traduzione:

Traduzione:

Immagini e beni

Traduzione:

Fonti

Traduzione:

JSON e file di dati

Traduzione:

Trasformazioni

Configurazione di Babele

Traduzione:

Posta in arrivo Configurazione

Traduzione:

Configurazione script

Traduzione:

Riattiva configurazione

Traduzione:

Configurazione di Vue

Traduzione:

Codice Spalato

Importazioni dinamiche

Traduzione:

Bundle Spliting

Traduzione:

Splitting basato sulla rotta

Traduzione:

Sostituzione del modulo caldo

HMR in JavaScript

Traduzione:

Reagisci HMR

Traduzione:

CSS HMR

Traduzione:

Variabili dell'ambiente

Utilizzo delle variabili ambientali

.env file

Traduzione:

Traduzione:

Traduzione:

Ambiente specifico Costruzioni

Traduzione:

Plugin

Installazione di Plugins

Traduzione:

Configurazione del plugin

Traduzione:

Plugin personalizzati

Traduzione:

Plugin popolari

Traduzione:

Configurazione

Basic .parcelrc

Traduzione:

Configurazione avanzata

Traduzione:

Configurazione di destinazione

Traduzione:

Ottimizzazione

Ottimizzazione della produzione

Traduzione:

Ottimizzazione delle dimensioni di Bundle

Traduzione:

Ottimizzazione delle immagini

Traduzione:

CSS Ottimizzazione

Traduzione:

Obiettivi

Obiettivi del browser

Traduzione:

Node.js Obiettivo

Traduzione:

Obiettivo della biblioteca

Traduzione:

Obiettivi multipli

Traduzione:

Caching

Costruire Caching

Caching HTTP

Traduzione:

Configurazione cache

Traduzione:

Mappe di origine

Configurazione della mappa di origine

Traduzione:

Tipologie della mappa di origine

Traduzione:

Analisi Bundle

Analizzatore Bundle

Traduzione:

Bundle Buddy

Traduzione:

Analisi personalizzata

Traduzione:

Migrazione

Da Webpack

Traduzione:

Da Creare App React

Traduzione:

Da Rollup

Traduzione:

Lista di controllo migrazione

  • Rimuovere vecchi file di configurazione bundler

  • Aggiornare gli script.json

  • Installare Parcel e rimuovere il vecchio bundler

  • Aggiornare i percorsi di importazione se necessario

  • Configure .parcelrc se sono necessarie trasformazioni personalizzate

  • Sviluppo e produzione di test

  • Aggiornamento delle tubazioni CI/CD

Migliori Pratiche

Organizzazione del progetto

Traduzione:

Le migliori pratiche di prestazione

  • ** Utilizzare le importazioni dinamiche** per la divisione del codice
  • Ottimizzare le immagini con formati appropriati
  • Minimize bundle size con albero tremante
  • 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

Sintesi

Parcel è uno strumento di configurazione zero che offre un'esperienza di sviluppo eccellente con una configurazione minima. Le caratteristiche principali includono:

  • **Configurazione del vapore ** 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 # Spaccatura automatica e manuale del codice

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

Traduzione: 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();

< >