Eine Einführung in den Rollup.js JavaScript Bundler-js-Tutorial-php.cn

Eine Einführung in den Rollup.js JavaScript Bundler

尊渡假赌尊渡假赌尊渡假赌

Freigeben： 2025-02-10 16:01:10

Original

698 Leute haben es durchsucht

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:
Verbesserte Codequalität:
Baumschüttelnungsoptimierung:
Rückwärtskompatibilität:
Flexibler Ausgang:
Leistung:

Installation:

rollup.js erfordert node.js v8.0.0 oder höher. Sie können es global installieren:

npm install rollup --global

Nach dem Login kopieren

Für größere Teams, die an Node.js -Projekten arbeiten, wird lokale Installation für die Versionskonsistenz empfohlen:

npm install rollup --save-dev

Nach dem Login kopieren

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

-Skripts:

"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"
}

Nach dem Login kopieren

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:

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

Nach dem Login kopieren

src/lib/dom.js:

export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

Nach dem Login kopieren

src/lib/time.js:

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

Nach dem Login kopieren

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rollup.js testing</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
  <h1>Clock</h1>
  <time class="clock"></time>
  <🎜>
  <🎜> </body>
</html>

Nach dem Login kopieren

Schneller Start:

Um den Code zu bündeln, führen Sie diesen Befehl aus dem Stammverzeichnis Ihres Projekts aus:

npx rollup ./src/main.js --file ./build/bundle.mjs --format iife

Nach dem Login kopieren

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:

npm install rollup --global

Nach dem Login kopieren

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!