So richten Sie Ihre ES6-Umgebung schnell ein

Wie Sie vielleicht wissen, beginnen Browser, ES6 einzuholen. Es funktioniert jedoch nicht alles so reibungslos wie erwartet, und dies kann ein zeitaufwändiges und langwieriges Problem sein. Wenn etwas schief geht, ist es nicht einfach, festzustellen, ob das Problem im Code oder im Browser liegt.

Aber keine Sorge, ich zeige Ihnen, wie Sie ES6-Code schnell installieren und schreiben und vor allem mit allen Browsern kompatibel machen können, die ES5 unterstützen.

ES5 bis ES6

Um ES6-Code zu schreiben, müssen wir etwas installieren, das ihn zu ES5 kompilieren kann. Wir werden verwenden , Rollup. Es kompiliert kleine Codeteile zu etwas Größerem und Komplexerem, z. B. einer Bibliothek oder einer Anwendung. Auf diese Weise können Sie OOP (Object-Oriented-Programming) verwenden, wodurch Ihr Code zusammen mit anderen nützlichen Funktionen übersichtlicher, strukturierter und modularer aussieht. Zur Verdeutlichung ist JS objektorientiert, jedoch bis zur Veröffentlichung von ES6 keine klassenbasierte objektorientierte Sprache wie Java, C ++, C # usw.

Andernfalls können Sie OOP am nächsten kommen, um Klassen mit ES5 einzuschließen, indem Sie IIFE (Sofort aufgerufener Funktionsausdruck) verwenden oder externe Bibliotheken installieren. Aber warum sollten Sie sich auf externe Ressourcen verlassen, wenn Sie eine Kernsprache haben, die das OOP-Paradigma unterstützt? Viele der am häufigsten verwendeten Programmiersprachen unterstützen dies bereits (wie C ++, Java, C # und PHP).

Warum ES6?

Persönlich verwende ich es, weil es mir ermöglicht, meinen Code in separaten Dateien zu organisieren, was das Skalieren und Verwalten des Codes erleichtert.

Zum Beispiel habe ich in meinem HTML eine script, die geladen wird main.js, und im Inneren main.jslade ich mehrere JSDateien mit importund exportAnweisungen. Anstatt mehrere Skripte in meiner HTML-Datei zu haben, benötige ich nur eines (weniger Code).

Voraussetzungen

  • Linux oder MacOS (Debian-basiert)
  • NPM (Paketmanager) installiert
  • Grundlegende CLI-Kenntnisse

Schritt eins: Rollup installieren

Um es verwenden zu können Rollup, müssen wir es global installieren. Denken Sie daran, zu verwenden sudo. Auf diese Weise können Sie auf RollupBefehle in jedem Projekt zugreifen , mit dem Sie arbeiten.

Schritt zwei: Dateistruktur

Nachdem Sie installiert haben Rollupglobal, ist der nächste Schritt der Ordnerstruktur einrichten und erstellen Sie zwei Ordner srcund destin Ihrem Projekt. Erstellen Sie außerdem index.html.

  • src → ES6-Dateien (Wo Sie den Code schreiben werden)
  • dest → Generiert ein ES5 (Kompilierte Versionen von ES6)

Beachten Sie, dass die bundle.jsDatei bei der RollupAusführung des Befehls automatisch generiert wird. Wir werden später darüber sprechen.

Schritt drei: Erstellen Sie eine Konfigurationsdatei

Erstellen Sie eine neue Datei und benennen Sie sie rollup.config.js. Fügen Sie dann diesen Code hinzu:

Stellen Sie sicher , dass die inputund outputQuellpfad mit Ihrer Ordnerstruktur korrekt ist, und dass diese Datei im Hauptordner abgelegt.

Schritt vier: Laden Sie die Skriptdatei in HTML

Wir sind fast fertig, aber zuerst müssen wir auf die richtige Quelldatei in unserer HTML-Vorlage verlinken. Dadurch wird die ES5-Datei geladen, die aus ES6 kompiliert wurde.

Schritt fünf: JS-Dateien einrichten

Um zu überprüfen, ob der RollupBefehl funktioniert, müssen wir eine einfache OOP-Struktur einrichten. Wir werden eine car.jsKlasse erstellen , und default exportdas zu main.js.

Beachten Sie, dass diese Datei eine neue Instanz der car.jsKlasse exportiert und dies den direkten Zugriff auf die Methoden ermöglicht, anstatt const car = new Car()in die main.jsKlasse zu schreiben .

Da ich ein fauler Softwareentwickler bin, ist der Umgang mit ein paar zusätzlichen Codezeichen zeitaufwändig :)

Importieren Sie anschließend die car.jsKlasse main.jsin, um auf die Methoden zuzugreifen type().

Schritt 6: Kompilieren Sie ES6 zu ES5

Führen Sie diesen Befehl aus, um die von uns erstellte Konfigurationsdatei auszuführen, $ rollup -coder $ rollup --config- beide sind gleich.

Nachdem Sie einen der Befehle ausgeführt haben, öffnen Sie ihn index.htmlüber einen Browser, öffnen Sie dann inspect ( ctrl + shift + I) im Browser und gehen Sie zu console. Wenn Sie den Text sehen "Tesla Model S", bedeutet dies, dass alles erfolgreich funktioniert hat.

Beachten Sie, dass Sie jedes Mal, wenn Sie Änderungen an ES6-Dateien vornehmen, diese aktualisieren müssen, indem Sie den Befehl ausführen.

Optional

Da Sie Rollupglobal installiert haben , können Sie ES6 kompilieren, ohne die Datei zu benötigen rollup.config.js. Es macht genau das Gleiche:

$ rollup src/main.js — o dest/bundle.js — f iife

Persönlich würde ich empfehlen, $ rollup -cwie in Schritt 6 gezeigt auszuführen, da weniger Code erforderlich ist. Denken Sie daran, dass Sie die Datei rollup.config.js enthalten müssen, wenn Sie diesen Befehl ausführen.

Wenn Sie dieses kurze Setup für den Installationsansatz für ES6 nützlich fanden, kommentieren Sie es und klatschen Sie. Es ist gutes Karma.