Vai al contenuto

Rollup Cheatsheet

Traduzione: - Modulo ES di prossima generazione

Rollup è un bundler per JavaScript che compila piccoli pezzi di codice in qualcosa di più grande e più complesso, come una libreria o un'applicazione. Utilizza il nuovo formato standardizzato per moduli di codice inclusi nella revisione ES6 di JavaScript. < > < >

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

Tabella dei contenuti

Installazione

Installazione globale

Traduzione:

Installazione locale (consigliato)

Traduzione:

Package.json Scripts

Traduzione:

Configurazione di base

Minimal rollup.config.js

Traduzione:

Configurazione di base completa

Traduzione:

Configurazioni multiple

Traduzione:

Configurazione basata sull'ambiente

Traduzione:

Opzioni di ingresso

Punto di ingresso singolo

Traduzione:

Punti di ingresso multipli

Traduzione:

Punti di entrata dinamica

Traduzione:

Ingresso con dipendenze esterne

Traduzione:

Opzioni di uscita

Formati di uscita

Traduzione:

Formati di uscita multipli

Elenco di destinazione

Traduzione:

Mappe di origine

Traduzione:

Plugin

Plugin essenziali

Traduzione:

Plugin Risolvere Nodo

Traduzione:

Connettore comune JS

Traduzione:

Babel Plugin

Traduzione:

Terser Plugin (Minificazione)

Traduzione:

Sostituire Plugin

Traduzione:

JSON Plugin

Traduzione:

URL Plugin (Assets)

Traduzione:

Dipendenze esterne

Configurazione esterna di base

Traduzione:

Funzione esterna dinamica

Traduzione:

Dipendenze dei pari come esterno

Traduzione:

Shaking albero

Abilitare l'albero Shaking

Traduzione:

Shaking albero con effetti collaterali

Traduzione:

Conservare gli effetti collaterali

Traduzione:

Albero Shaking Esempio

Traduzione:

Codice Spalato

Importazioni dinamiche

Traduzione:

Cuscinetti manuali

Traduzione:

Manuale dinamico Coperte

Traduzione:

Spalato punto di ingresso

Traduzione:

Modalità orologio

Modalità di orologio di base

Guarda la configurazione

Traduzione:

Guarda con Plugin

Traduzione:

Sviluppo e produzione

Configurazione basata sull'ambiente

Traduzione:

File di configurazione separati

Traduzione:

Package.json Scripts

Traduzione:

Integrazione di TypeScript

Plugin di tipo script

Traduzione:

Traduzione:

Configurazione script

Traduzione:

TypeScript con Babel

Traduzione:

CSS e asset

Posta in arrivo Plugin

Traduzione:

Traduzione:

Supporto SCSS/Sass

Traduzione:

Asset Handling

Traduzione:

Sviluppo della biblioteca

Configurazione della libreria

Traduzione:

Pacchetto.json per la biblioteca

Traduzione:

Tipologia Biblioteca

Traduzione:

Configurazione avanzata

Plugin personalizzato

Traduzione:

Costruzioni condizionali

Traduzione:

Multi-entry con dipendenze condivise

Traduzione:

Ottimizzazione delle prestazioni

Analisi Bundle

Ottimizzare le dipendenze

Traduzione:

Minimize Bundle Size

Traduzione:

Risoluzione dei problemi

Questioni e soluzioni comuni

Dipendenze circolari

Traduzione:

Dipendenze esterne Non trovato

Traduzione:

Problemi del modulo CommonJS

Traduzione:

Problemi di memoria

Traduzione:

Configurazione del debito

Traduzione:

Migliori Pratiche

Organizzazione di configurazione

Traduzione:

Le migliori pratiche di prestazione

  • Utilizza moduli ES per una migliore agitazione degli alberi
  • Le dipendenze esterne Mark per ridurre la dimensione del fascio
  • Abilitare la divisione del codice per grandi applicazioni
  • ** Utilizzare terser** per la minificazione di produzione
  • Analizzare fasci per identificare opportunità di ottimizzazione

Migliori pratiche di sviluppo

  • ** Utilizzare la modalità orologio** per lo sviluppo
  • Abilita mappe di origine per il debug
  • Set up live reload* per una migliore DX
  • Configurare linting con ESLint
  • Utilizzare TypeScript per una migliore sicurezza di tipo

Sviluppo della biblioteca Migliori Pratiche

  • ** Fornire formati multipli** (ES, CJS, UMD)
  • Dichiarazioni Generate TypeScript per gli utenti di TypeScript
  • Le dipendenze paritetiche di Mark come esterne
  • ** Utilizzare la versione semantica** per le versioni
  • **Test costruisce ** prima di pubblicare

Sintesi

Rollup è un potente bundle di moduli che eccelle nella creazione di pacchetti ottimizzati per librerie e applicazioni. Le caratteristiche principali includono:

  • ES Module First: Supporto nativo per moduli ES con eccellente agitazione degli alberi
  • ** Formati di output multipli**: Supporto per ES, CJS, UMD, IIFE, AMD e SystemJS
  • Plugin Ecosystem: Ricco ecosistema di plugin per varie trasformazioni

  • Code Splitting # Capacità di divisione del codice avanzate

  • Tree Shaking: eliminazione automatica del codice morto
  • TypeScript Support: Integrazione TypeScript di prima classe
  • Library Friendly: Eccellente per la costruzione e la distribuzione di librerie

Sfruttando i punti di forza di Rollup e seguendo le migliori pratiche, è possibile creare pacchetti altamente ottimizzati che sono perfetti sia per lo sviluppo della libreria che per la costruzione di applicazioni.

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

< >