Einführung in die grundlegende Verwendung von Rollup.js

Rollup.js ist ein JavaScript-Bündelungswerkzeug. Dieser Artikel wird seine grundlegende Verwendung im Detail vorstellen.

I. Einführung

Die Rolle von Bündelungswerkzeugen

Bündelungswerkzeuge können mehrere JavaScript-Skripte zu einem Skript für die Verwendung in Browsern kombinieren. Es gibt hauptsächlich drei Gründe, warum Browser Skriptbündelung benötigen:

• Frühe Probleme mit der Modulunterstützung in Browsern: Frühe Browser unterstützten keine Module. Für groß angelegte Webprojekte mussten mehrere Skripte zu einem einzigen Skript zusammengefasst werden, bevor sie ausgeführt werden konnten.
• Kompatibilität des Modulmechanismus: Der Modulmechanismus von Node.js ist nicht mit Browsern kompatibel. Er muss durch ein Bündelungswerkzeug verarbeitet werden, um in Browsern ordnungsgemäß verwendet zu werden.
• Leistungsoptimierung: Aus Leistungssicht ist es für einen Browser besser, ein großes Skript als mehrere kleine Skripte zu laden. Dies liegt daran, dass es die Anzahl der HTTP-Anfragen reduziert und somit die Ladeeffizienz verbessert.

Derzeit ist das am häufigsten verwendete Bündelungswerkzeug Webpack. Es ist leistungsstark und kann fast alle Arten von komplexen Bündelungsanforderungen erfüllen. Seine Konfiguration ist jedoch komplex, die Lernkosten sind hoch und die Verwendung ist relativ mühsam, was von Entwicklern immer wieder kritisiert wird.

Rollup.js wurde mit der ursprünglichen Absicht entwickelt, ein einfach zu bedienendes ES-Modul-Bündelungswerkzeug zu erstellen. Benutzer können es direkt ohne komplexe Konfiguration verwenden. In dieser Hinsicht leistet es wirklich gute Arbeit. Durch die kontinuierliche Weiterentwicklung hat Rollup.js auch die Fähigkeit erlangt, CommonJS-Module zu bündeln. Beim Bündeln von CommonJS-Modulen ist jedoch eine komplexe Konfiguration erforderlich. In diesem Fall ist es eigentlich nicht viel einfacher als Webpack.

Daher wird empfohlen, Rollup.js nur zum Bündeln von ES-Modulen zu verwenden, um seine Vorteile voll auszuschöpfen. Der folgende Inhalt zeigt, wie einfach es ist, ES-Module mit Rollup.js zu bündeln. Wenn Ihr Projekt CommonJS-Module verwendet, ist Rollup.js nicht sehr zu empfehlen, da seine Vorteile nicht offensichtlich sind. Wenn Sie nicht viel über die Unterschiede zwischen ES-Modulen und CommonJS-Modulen wissen, können Sie sich das ES6-Tutorial ansehen.

II. Installation

In diesem Artikel wird Rollup.js global installiert. Der Befehl lautet wie folgt:

$ npm install --global rollup

Es kann jedoch auch ohne Installation verwendet werden. Die Methode besteht darin, rollup in allen Befehlen durch npx rollup zu ersetzen.

Wenn Sie es zum ersten Mal verwenden, können Sie den folgenden Befehl ausführen, um die Hilfeinformationen anzuzeigen:

$ rollup --help
# Oder
$ npx rollup --help

III. Beispiele

Als Nächstes verwenden Sie Rollup.js, um zwei einfache Skripte zu bündeln: die Bibliotheksdatei add.js und das Einstiegsskript main.js.

add.js

const PI = 3.14;
const E = 2.718;

export function addPi(x) {
  return x + PI;
}

export function addE(x) {
  return x + E; 
}

Im obigen Code exportiert das Modul add.js zwei Hilfsfunktionen addPi() und addE().

main.js

import { addPi } from './add.js';

console.log(addPi(10));

In diesem Code lädt das Einstiegsskript main.js die Hilfsfunktion addPi() von add.js.

Bündelungsvorgang

Verwenden Sie Rollup.js zum Bündeln. Der Befehl lautet wie folgt:

$ rollup main.js

Beim Bündeln muss nur das Einstiegsskript main.js angegeben werden, und Rollup bündelt automatisch die Abhängigkeiten. Das Bündelungsergebnis wird standardmäßig auf dem Bildschirm ausgegeben, und der Inhalt lautet wie folgt:

const PI = 3.14;

function addPi(x) {
  return x + PI;
}

console.log(addPi(10));

Es ist ersichtlich, dass die Anweisungen import und export verschwunden sind und durch den ursprünglichen Code ersetzt wurden. Darüber hinaus wurde die Funktion addE() nicht mit eingebunden, da sie nicht in main.js verwendet wurde. Diese Funktion wird als Tree-Shaking bezeichnet, d. h. das automatische Löschen von ungenutztem Code während des Bündelns. Aufgrund der oben genannten zwei Punkte ist der von Rollup ausgegebene Code sehr sauber und kleiner als der anderer Bündelungswerkzeuge.

Wenn Sie das Bündelungsergebnis in einer bestimmten Datei speichern möchten, können Sie den Parameter --file [FILENAME] verwenden. Der Befehl lautet wie folgt:

$ rollup main.js --file bundle.js

Der obige Befehl speichert das Bündelungsergebnis in der Datei bundle.js.

IV. Vorsichtsmaßnahmen bei der Verwendung

Mehrere Einstiegsskripte

Wenn es mehrere Einstiegsskripte gibt, müssen Sie deren Dateinamen nacheinander eingeben und den Parameter --dir verwenden, um das Ausgabeverzeichnis anzugeben. Zum Beispiel:

$ rollup m1.js m2.js --dir dist

Der obige Befehl bündelt und generiert mehrere Dateien im Verzeichnis dist, einschließlich m1.js, m2.js und deren gemeinsamen Abhängigkeiten (falls vorhanden).

Automatische Ausführungsfunktionsumhüllung

Die Verwendung des Parameters --format iife platziert das Bündelungsergebnis in einem Immediately-Invoked Function Expression. Der Befehl lautet wie folgt:

$ rollup main.js --format iife

Code-Minimierung

Wenn Sie den Code nach dem Bündeln minimieren möchten, können Sie den Parameter --compact verwenden. Der Befehl lautet wie folgt:

$ rollup main.js --compact

Darüber hinaus kann auch ein spezielles Tool verwendet werden, um die Code-Minimierung zu erreichen. Zum Beispiel:

$ rollup main.js | uglifyjs --output bundle.js

Der obige Befehl wird in zwei Schritten ausgeführt. Der erste Schritt ist das Bündeln mit Rollup, und der zweite Schritt ist die Verwendung von uglifyjs zur Code-Minimierung. Schließlich wird das Ergebnis in die Datei bundle.js geschrieben.

Konfigurationsdatei

Rollup unterstützt die Verwendung einer Konfigurationsdatei (rollup.config.js), in der alle Parameter geschrieben werden. Hier ist ein Beispiel:

// rollup.config.js
export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'es'
  }
};

Verwenden Sie den Parameter -c, um die Konfigurationsdatei zu aktivieren. Der Befehl lautet wie folgt:

$ rollup -c

Ich empfehle jedoch nicht, die Konfigurationsdatei zu verwenden, da sie zusätzliche Komplexität hinzufügt. Im Standardszenario reichen Befehlszeilenparameter aus, und der Ausdruck von Befehlszeilenparametern ist auch leichter zu lesen.

V. Konvertierung in CommonJS-Module

Schließlich unterstützt Rollup auch die Konvertierung von ES-Modulen in CommonJS-Module. Verwenden Sie einfach den Parameter --format cjs. Der Befehl lautet wie folgt:

$ rollup add.js --format cjs

Der konvertierte CommonJS-Modulcode lautet wie folgt:

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const PI = 3.14;
const E = 2.718;

function addPi(x) {
  return x + PI;
}

function addE(x) {
  return x + E; 
}

exports.addE = addE;
exports.addPi = addPi;

Leapcell: Die beste Serverless-Plattform für Webhosting, asynchrone Aufgaben und Redis

Abschließend möchte ich die beste Plattform für die Bereitstellung von JavaScript-Projekten empfehlen: Leapcell

1. Multi-Sprachen-Unterstützung

• Entwickeln Sie mit JavaScript, Python, Go oder Rust.

2. Stellen Sie unbegrenzt Projekte kostenlos bereit

• Zahlen Sie nur für die Nutzung - keine Anfragen, keine Gebühren.

3. Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 US-Dollar unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

4. Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD-Pipelines und GitOps-Integration.
• Echtzeitmetriken und -protokollierung für verwertbare Erkenntnisse.

5. Mühelose Skalierbarkeit und hohe Leistung

• Auto-Skalierung zur einfachen Bewältigung hoher Parallelität.
• Kein Betriebsaufwand - Konzentrieren Sie sich einfach auf das Bauen.

Erfahren Sie mehr in der Dokumentation!

Leapcell Twitter: https://x.com/LeapcellHQ