suchen

Heim >Web-Frontend >js-Tutorial >Eine Einführung in den Rollup.js JavaScript Bundler

Eine Einführung in den Rollup.js JavaScript Bundler

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌Original
2025-02-10 16:01:10633Durchsuche

rollup.js: Ein JavaScript-Modul der nächsten Generation

An Introduction to the Rollup.js JavaScript Bundler

rollup.js, erstellt von Rich Harris (ebenfalls Autor von SELTE), ist ein moderner JavaScript -Modul -Bundler, der mehrere Quelldateien zu einem einzigen optimierten Bundle kompiliert. Im Gegensatz zu einigen All-in-One-Bundlers konzentriert sich Rollup hauptsächlich auf JavaScript, das Geschwindigkeits- und Anpassungsvorteile bietet. Erforschen wir die wichtigsten Funktionen und wie Sie sie effektiv verwenden.

Vorteile der Verwendung von Rollup.js:

  • vereinfachte Entwicklung:
    • Verbesserung kleinerer, in sich geschlossener Quelldateien verbessert den Entwicklungs-Workflow erheblich.
  • Verbesserte Codequalität:
    • integriert nahtlos in Linter, Formatter und Syntax -Prüfer während des Erstellungsprozesses.
  • Baumschüttelnungsoptimierung:
    • Entfernt intelligent den nicht verwendeten Code, was zu kleineren und schnelleren Bündeln führt.
  • Rückwärtskompatibilität:
    • transpiliert modernes JavaScript (ES6) auf ES5, um sicherzustellen, dass ein breiterer Browserunterstützung ist.
  • Flexibler Ausgang:
    • erzeugt mehrere Ausgangsformate (ES5, ES6 -Module, CommonJs) für verschiedene Projektanforderungen.
  • Leistung:
    • im Allgemeinen schneller und anpassbarer als andere Bundler, insbesondere mit komplexen Konfigurationen.

Installation:

rollup.js erfordert node.js v8.0.0 oder höher. Sie können es global installieren: 
<code class="language-bash">npm install rollup --global</code>

Für größere Teams, die an Node.js -Projekten arbeiten, wird lokale Installation für die Versionskonsistenz empfohlen: 
<code class="language-bash">npm install rollup --save-dev</code>

npx rollup Verwenden Sie nach der lokalen Installation package.json, um Befehle auszuführen. Definieren Sie Alternativ Rollup -Befehle in Ihren

-Skripts: 
<code class="language-json">"scripts": {
  "watch": "npx rollup ./src/main.js --file ./build/bundle.js --format es --watch",
  "build": "npx rollup ./src/main.js --file ./build/bundle.js --format es",
  "help": "npx rollup --help"
}</code>

npm run watch Diese Skripte können mit npm run build oder npx rollup ausgeführt werden. In diesem Tutorial wird in erster Linie

für eine breitere Kompatibilität verwendet.

Ein einfaches Beispiel:

Erstellen wir ein grundlegendes digitales Clock -Beispiel, um die Funktionalität von Rollup zu veranschaulichen. Sie können Beispieldateien von GitHub herunterladen oder manuell erstellen.
  • src/main.js:
    • (Haupteintrittspunkt) 
<code class="language-javascript">import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';

const clock = dom.get('.clock');

if (clock) {
  console.log('initializing clock');
  setInterval(() => {
    clock.textContent = formatHMS();
  }, 1000);
}</code>
  • src/lib/dom.js:
    • (DOM Utility Library) 
<code class="language-javascript">export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}</code>
  • src/lib/time.js:
    • (Zeitformatierungsfunktionen) 
<code class="language-javascript">function timePad(n) {
  return String(n).padStart(2, '0');
}
export function formatHM(d = new Date()) {
  return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}
export function formatHMS(d = new Date()) {
  return formatHM(d) + ':' + timePad(d.getSeconds());
}</code>
  • index.html:
    • (HTML zur Anzeige der Uhr) 
<code class="language-html"><!DOCTYPE html>


  <meta charset="UTF-8">
  <title>Rollup.js testing</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">


  <h1>Clock</h1>
  <time class="clock"></time>
  
   
</code>

Schneller Start:

Um den Code zu bündeln, führen Sie diesen Befehl aus dem Stammverzeichnis Ihres Projekts aus: 
<code class="language-bash">npx rollup ./src/main.js --file ./build/bundle.mjs --format iife</code>

build/bundle.mjs Dies schafft index.html. Beachten Sie, dass nicht verwendete Funktionen durch Baumschütteln entfernt werden. Auf die

verweist auf diese gebündelte Datei.

Key Rollup.js Konfigurationsoptionen:

  • --file oder -o: Gibt den Namen Ausgabedatei an.
  • --format oder -f: Definiert das Ausgabebild (iife, es, cjs, umd, amd, system).
  • --sourcemap: Generiert eine Quellkarte für das einfachere Debuggen (verwenden Sie --sourcemap inline für eine Inline -Quellkarte).
  • --watch oder -w: Uhren nach Dateiänderungen und automatisch umgebaut.
  • --config oder -c: Verwendet eine Konfigurationsdatei (z. B. rollup.config.js).

Konfigurationsdatei (rollup.config.js):

Eine Konfigurationsdatei vereinfacht das Verwalten mehrerer Optionen und Plugins. Hier ist ein Beispiel: 

<code class="language-bash">npm install rollup --global</code>

Führen Sie mit: npx rollup --config

aus

Plugins:

Die Erweiterbarkeit von

Rollup stammt aus seinem Plugin -System. Zu den allgemeinen Plugins gehören:

  • @rollup/plugin-node-resolve: Handles node.js Modulauflösung.
  • @rollup/plugin-commonjs: Konvertiert CommonJS -Module in ES -Module.
  • @rollup/plugin-replace: Ersetzt Token in Ihrem Code während des Erstellungsprozesses.
  • @rollup/plugin-buble: ES6 -Code in ES5 (Betrachten Sie Alternativen für die moderne Browserunterstützung).
  • rollup-plugin-terser: minimiert den Ausgabescode.

Denken Sie daran, Plugins mit npm install <plugin-name> --save-dev</plugin-name> zu installieren. Geben Sie sie in das plugins -Array in Ihr rollup.config.js.

ein

Erweiterte Techniken:

  • Umgebungsvariablen: Verwenden Sie Umgebungsvariablen (z. B. NODE_ENV), um Ihren Build -Prozess bedingt zu ändern (Entwicklung vs. Produktion).
  • Mehrere Bündel: Rollup konfigurieren, um mehrere Bündel aus verschiedenen Einstiegspunkten zu generieren.
  • Code -Aufteilung: Optimieren Sie Ihre Anwendung weiter, indem Sie Code in kleinere auf Bedarf geladene Teile aufteilen.

rollup.js bietet eine leistungsstarke und flexible Möglichkeit, Ihre JavaScript -Module zu bündeln. Durch das Verständnis der Kernfunktionen und des Plugin -Ökosystems können Sie hoch optimierte und wartbare JavaScript -Anwendungen erstellen. Denken Sie daran, die offizielle Dokumentation von Rollup.js für die aktuellsten Informationen und eine umfassende Liste von Plugins zu konsultieren.

Das obige ist der detaillierte Inhalt vonEine Einführung in den Rollup.js JavaScript Bundler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json html es6 npm Array define for date format include Directory using map JS dom this display github Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So richten Sie VS -Code für die React -Entwicklung einNächster Artikel：So richten Sie VS -Code für die React -Entwicklung ein

In Verbindung stehende Artikel

Mehr sehen