Vai al contenuto

Rollup Cheatsheet

Traduzione: __HTML_TAG_65_Rollup - Modulo ES di prossima generazione Bundler_HTML_TAG_66__

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: __HTML_TAG_70_

Tavola 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:

Multiple Entry Points

Traduzione:

Dynamic Entry Points

Traduzione:

Entrata con dipendenze esterne

Traduzione:

Opzioni di uscita

Formati di output

Traduzione:

Formati di output multipli

Elenco di output

Traduzione:

Source Maps

Traduzione:

Plugin

Plugin essenziali

Traduzione:

Node Resolve Plugin

Traduzione:

CommonJS Plugin

Traduzione:

Babel Plugin

Traduzione:

Terser Plugin (Minification)

Traduzione:

Sostituire Plugin

Traduzione:

JSON Plugin

Traduzione:

URL Plugin (Assets)

Traduzione:

Dipendenze esterne

Configurazione esterna di base

Traduzione:

Funzione dinamica esterna

Traduzione:

Peer Dependencies as Outside

Traduzione:

Tree Shaking

Abilitando l'albero Shaking

Traduzione:

Tree Shaking with Side Effects

Traduzione:

Conservare gli effetti collaterali

Traduzione:

Tree Shaking Esempio

Traduzione:

Codice Spalato

Importazioni dinamiche

Traduzione:

Manual Chunks

Traduzione:

Rulli manuali dinamici

Traduzione:

Entry Point Spliting

Traduzione:

Modalità orologio

Modalità di orologio di base

Guarda la configurazione

Traduzione:

Guarda con i Plugin

Traduzione:

Development vs Production

Configurazione basata sull'ambiente

Traduzione:

Traduzione:

Package.json Scripts

Traduzione:

Integrazione TypeScript

TypeScript Plugin

Traduzione:

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/main.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    typescript({
      tsconfig: './tsconfig.json'
    })
  ]
};

Configurazione script

Traduzione:

TypeScript with Babel

Traduzione:

CSS and Assets

PostCSS # Plugin

Traduzione:

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    postcss({
      extract: true, // Extract to separate CSS file
      minimize: true, // Minify CSS
      sourceMap: true
    })
  ]
};

SCSS/Sass Support

Traduzione:

Asset Handling

Traduzione:

Library Development

Configurazione della libreria

Traduzione:

Package.json per la biblioteca

Traduzione:

TypeScript Biblioteca

Traduzione:

Configurazione avanzata

Plugin personalizzato

Traduzione:

Costruzioni condizionali

Traduzione:

Multi-entry with Shared Dependencies

Traduzione:

Ottimizzazione delle prestazioni

Analisi Bundle

Optimize dipendenze

Traduzione:

Minimize Bundle Size

Traduzione:

Risoluzione dei problemi

Questioni e soluzioni comuni

Dipendenze circolari

Traduzione:

Dipendenze esterne non trovate

Traduzione:

CommonJS Module Issues

Traduzione:

Questioni di memoria

Traduzione:

Debug Configuration

Traduzione:

Migliori Pratiche

Configurazione Organizzazione

Traduzione:

Performance Best Practices

-Utilizza moduli ES per una migliore agitazione degli alberi - Le dipendenze esterne Mark per ridurre la dimensione del fascio - Abilita la divisione del codice per grandi applicazioni - Utilizza il tergicristallo per la minificazione della produzione - **Analyze bundle per identificare opportunità di ottimizzazione

Migliori pratiche di sviluppo

  • ** Utilizzare la modalità orologio** per lo sviluppo
  • Abilita mappe di origine per il debug
  • ** Ricarica dal vivo ** per una migliore DX Configurare linting con ESLint
  • Utilizzare TypeScript per una migliore sicurezza di tipo

Library Development Migliori Pratiche

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

Sommario

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 albero
  • ** 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();

__HTML_TAG_78_