Vai al contenuto

ESBuild Cheatsheet

ESBuild - Un JavaScript estremamente veloce Bundler > ESBuild è un bundler JavaScript estremamente veloce e minifier. Imballa il codice JavaScript e TypeScript per la distribuzione sul web, ed è scritto in Go che lo rende 10100x più veloce di altri bundlers. < > < > Traduzione: Traduzione: Copia tutti i comandi Traduzione: Generare PDF < > < > ## Tabella dei contenuti - [Installazione] - [Uso di base](#basic-usage_) - [Interfaccia della linea](#command-line-interface] - [JavaScript API](#javascript-api) - [Configurazione](#configuration) - [Entry Points](#entry-points) - [Output](_LINK_6__] - [Loaders] - [Plugins] - [ Dipendenze esterne](#external-dependencies) - [Codice Splitting](#code-splitting_) - [Tree Shaking] - [Source Maps](#source-maps_) - [Modalità di attesa](_LINK_13___) - [Server di sviluppo](#development-server_) - [TypeScript Support](#typescript-support_) - [JSX e React](#jsx-and-react] - [CSS and Assets](#css-and-assets) - [Ottimizzazione](#optimization) - [Platform Targets](#platform-targets_) - [Caratteristiche avanzate](#advanced-features_) - [Performance](_LINK_21___) - [Le migliori pratiche](_LINK_22__) ## Installazione ### Installazione globale Traduzione: ### Installazione locale (consigliato) Traduzione: ### Package.json Scripts Traduzione: ## Uso di base ### Semplice costruzione Traduzione: ### Punti di ingresso multipli Traduzione: ### Supporto di TypeScript Traduzione: ## Interfaccia riga di comando ### Opzioni di costruzione Traduzione: ### Opzioni di formato Traduzione: ### Opzioni di destinazione Traduzione: ### Dipendenze esterne Traduzione: ### Opzioni di prelievo Traduzione: ## JavaScript API ### API di base Traduzione: ### Configurazione avanzata # ### Costruzioni multiple Traduzione: ## Configurazione ### File di configurazione Traduzione: ### Ambiente specifico Configurazione Traduzione: ## Punti di ingresso ### Punto di ingresso singolo Traduzione: ### Punti di ingresso multipli Traduzione: ### Punti di ingresso nominati Traduzione: ### Punti di entrata dinamica Traduzione: ## Produzione ### File di output Traduzione: ### Elenco di destinazione Traduzione: ### Sentiero pubblico Traduzione: ### Scrivi alla memoria Traduzione: ## Caricatori ### Caricatori incorporati Traduzione: ### File Loader Traduzione: ### Data URL Loader Traduzione: ### Caricatore di testo Traduzione: ### Base64 Loader Traduzione: ## Plugin ### Sistema Plugin Traduzione: ### File System Plugin Traduzione: ### Plugin HTTP Traduzione: ### Variabili dell'ambiente Plugin Traduzione: ## Dipendenze esterne ### Esterno di base Traduzione: ### Esterno con modelli # ### Esterno condizionato Traduzione: ## Codice Spalato ### Spalato codice automatico Traduzione: ### Importazioni dinamiche Traduzione: ### Cuscinetti manuali Traduzione: ## Shaking albero ### Shaking albero automatico Traduzione: ### Effetti collaterali Traduzione: ### Albero Shaking Esempio Traduzione: ## Mappe di origine ### Opzioni della mappa di origine Traduzione: ### Configurazione della mappa di origine Traduzione: ## Modalità orologio ### Modalità di orologio di base Traduzione: ### Guarda con Callbacks Traduzione: ### Configurazione avanzata dell'orologio Traduzione: ## Server di sviluppo ### Server di sviluppo di base Traduzione: ### API del server di sviluppo Traduzione: ### Live Reload Setup Traduzione: ## Supporto di TypeScript ### Tipologia di base Traduzione: ### Tipologia con controllo di tipo Traduzione: ### Configurazione script Traduzione: ### Tipologia Sentieri Traduzione: ## JSX e React ### Reagisci JSX __________ ### Personalizzato JSX Traduzione: ### JSX Sviluppo Traduzione: ### Tipologia + Reazione Traduzione: ## CSS e asset ### CSS Bundling Traduzione: ### CSS Moduli (con plugin) Traduzione: ### Asset Handling Traduzione: ## Ottimizzazione ### Minificazione Traduzione: ### Eliminazione del codice morto Traduzione: ### Definire le costanti Traduzione: ### Console di goccia Traduzione: ## Obiettivi della piattaforma ### Destinazione del browser Traduzione: ### Node.js Obiettivo Traduzione: ### Piattaforma Neutrale Traduzione: ## Caratteristiche avanzate ### Banner e Footer Traduzione: ### Codice di iniezione Traduzione: ### Generazione di Metafile Traduzione: ### Condizioni Traduzione: ## Prestazioni ### Costruisci le prestazioni Traduzione: ### Incremental Builds Traduzione: ### Costruzioni parallele Traduzione: ## Migliori Pratiche ### Struttura del progetto Traduzione: ### Le migliori pratiche di configurazione Traduzione: ### Ottimizzazione delle prestazioni - ** Utilizzare dipendenze esterne** per le librerie che non hanno bisogno di bundling - **Abilitare l'albero scuotere** con moduli ES - **Utilizzare la divisione del codice** per grandi applicazioni - **Minimize dimensione del fascio** con caricatori adeguati - **Cache build** con compilazione incrementale ### Flusso di lavoro - ** Utilizzare la modalità orologio** per lo sviluppo - **Abilita mappe di origine** per il debug - *Set up live reload** per una migliore DX - **Type check separatamente** per i progetti TypeScript - ** Utilizzare server di sviluppo** per i test locali ### Distribuzione della produzione - **Minify code** per piccoli pacchetti - *Dichiarazioni della console * per codice più pulito - **Metofile generici** per l'analisi dei pacchetti - **Utilizzare i contenuti** per il caching - **Test costruisce ** prima della distribuzione --- ## Sintesi ESBuild è un bundler JavaScript estremamente veloce che offre ottime prestazioni con una configurazione minima. Le caratteristiche principali includono: - **Blazing Fast Speed**: 10100x più veloce di altri bundlers - **Configurazione del vapore ** Funziona dalla scatola per la maggior parte dei progetti - **TypeScript Support**: compilazione TypeScript integrata - **Tree Shaking**: eliminazione automatica del codice morto - #Code Splitting # Sostegno alle importazioni dinamiche e alla divisione - ** Formati multipli**: moduli ES, CommonJS, IIFE e altro ancora - **Plugin System**: Ampia con plugin personalizzati - ** Server sviluppo**: server di sviluppo integrato con ricarica live Sfruttando la velocità e la semplicità di ESBuild, è possibile migliorare significativamente i tempi di costruzione mantenendo tutte le funzionalità necessarie per lo sviluppo web moderno. 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(); # < >