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

Inhaltsverzeichnis

Clock

Heim

Web-Frontend

js-Tutorial

Eine Einführung in den Rollup.js JavaScript Bundler

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

Feb 10, 2025 pm 04:01 PM

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 id="Clock">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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

4 Wochen vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Inzoi: Wie man sich für Schule und Universität bewerbt

1 Monate vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

Wo finden Sie den Site Office -Schlüssel in Atomfall

4 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7888

Java-Tutorial

1649

CakePHP-Tutorial

1410

Laravel-Tutorial

1301

PHP-Tutorial

1247

Related knowledge

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Apr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Wer bekommt mehr Python oder JavaScript bezahlt? Apr 04, 2025 am 12:09 AM

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Ist JavaScript schwer zu lernen? Apr 03, 2025 am 12:20 AM

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen? oder: Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Apr 04, 2025 pm 05:36 PM

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Die Entwicklung von JavaScript: Aktuelle Trends und Zukunftsaussichten Apr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Apr 04, 2025 pm 05:09 PM

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Apr 04, 2025 pm 05:12 PM

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...

See all articles