Erste Schritte mit Webpack und ES6-Modulen

Getting Started with Webpack and ES6 Modules

Früher dachte ich, dass Webpack eine dieser Technologien ist, mit denen man nicht anfangen kann. Es stellt sich heraus, dass der Einstieg in Webpack und die Verwendung von ES6-Modulen gar nicht so schlecht ist!

Lassen Sie uns ein kleines, sehr einfaches Webpack-basiertes Projekt durchgehen. Wir sehen uns die Projektstruktur, die Konfigurationsdateien und ein einfaches, allgemeines Beispiel für die Verwendung von Webpack mit ES6-Modulen an.

Bereit? Lass uns gehen! 🚀

Projektstruktur

Ich bin ein großer Fan von Ordnung und Ordnung, nicht nur in meinen Webprojekten, sondern auch im wirklichen Leben. Mal sehen, wie dieses Demo-Projekt eingerichtet ist:

- index.html - package.json - webpack.config.js - /src |- app.js |- /modules |- (various module files) - /dist |- bundle.js
  • index.html ist unsere HTML-Datei, die den JavaScript-Inhalt an das Browserfenster ausgibt.
  • package.json ist unsere gesamte Projektkonfiguration und unsere Metadaten. Dies enthält auch Informationen darüber, welche Node.js-Module von Drittanbietern unser Projekt benötigt, um zu funktionieren. Dazu später mehr.
  • webpack.config.js teilen wir webpack mit, was zu tun ist, welche Dateien gelesen werden sollen und wo die einzelne JavaScript-Datei, die es erstellt, platziert werden soll.
  • /src/app.js ist unsere funktionierende Javascript-Datei. Das ist die Basisdatei, in die unsere Änderungen gehen, aber wir können unsere Arbeit auch in kleinere Dateien (Module) aufteilen!
  • /src/modules enthält die kleinen, bitgroßen, wiederverwendbaren Teile unseres Projekts.
  • Das /dist -Verzeichnis enthält die Ausgabedatei, nachdem das Webpack all unsere kleineren JavaScript-Dateien gebündelt hat.
  • /dist/bundle.js ist die Datei, die Webpack generiert. Es ist die Datei, die in die Datei index.html aufgenommen wird.

Webpack installieren

Um webpack für die Verwendung im Projekt verfügbar zu machen, müssen wir es nur über npm installieren. Öffnen Sie Ihre Terminal-App, wechseln Sie in Ihr Projektverzeichnis und geben Sie Folgendes ein:

 npm install webpack --save

webpack wird heruntergeladen und Ihrer package.json -Datei { package.json:11 } hinzugefügt und ist sofort einsatzbereit.

Als nächstes schauen wir uns die Datei webpack.config.js an.

Webpack-Konfig

Ich würde sagen, der interessanteste Teil, auf den Sie in der Webpack-Konfigurationsdatei achten sollten, ist, wo wir webpack mitteilen, dass sich unsere anfängliche Quelldatei befindet, und wo die Ausgabedatei platziert werden soll, wenn sie unsere Java-Script-Dateien zusammenfasst.

Eintrag

Der entry: key { webpack.config.js:2 } lässt webpack wissen: „Hey, das ist die primäre Quelldatei. Beginnen Sie hier!“ Im Demoprojekt weisen wir webpack an, die Datei app.js als Ausgangspunkt zu verwenden.

 entry: './src/app.js' ,

Ausgabe

Die output: key { webpack.config.js:3 } wird verwendet, um den Pfad und den Dateinamen anzugeben, den das Webpack generieren soll. Die Datei bundle.js ist das eigentliche JavaScript, das unser Projekt index.html document { index.html:41 } einschließt und zur Laufzeit ausführt.

 output : { filename : './dist/bundle.js' },

Das ist so ziemlich alles, womit wir uns beschäftigen, wenn es um die Datei webpack.config.js für unser winziges Demoprojekt geht! Es gibt noch mehr in dieser Datei, die Sie erkunden können, aber lassen Sie uns jetzt weitermachen und sehen, wie Sie als nächstes ES6-Module verwenden.

Verwendung von ES6-Modulen

Nachdem das Webpack installiert, eingerichtet und bereit ist, unseren Quellcode zu bündeln, können wir jetzt mit der Verwendung der import und export -JavaScript-Schlüsselwörter beginnen. Diese Anweisungen erreichen genau das, wonach sie klingen: „JavaScript in diese Datei importieren, damit ich mit ihrem Code arbeiten kann“ und „Dieses JavaScript exportieren, damit es an anderer Stelle im Projekt verwendet werden kann“.

Die Verwendung der import und export ist eine Möglichkeit, große Dateien in kleinere, wiederverwendbare Codemodule aufzuteilen. Es hilft auch, die Dinge ordentlich und organisiert in der Dateistruktur zu halten!

Export verwenden

Beispielsweise gibt es in der Projektstruktur eine Datei /src/modules/math-functions.js . Diese Datei enthält eine Funktion namens sum { math-functions.js:1 }.

 const sum = (a, b) => { return a + b; };

Die sum nimmt zwei Zahlen, addiert sie und gibt das Ergebnis zurück. Am Ende derselben Datei sehen wir export {sum, ...}; { math-funktionen.js:9 }.

export { sum , product };

Dadurch können wir die sum an anderer Stelle im Projekt wiederverwenden, aber dazu müssen wir die Funktion zuerst import .

import

Oben in der Datei app.js befinden sich einige import -Anweisungen { app.js:2 }.

 import {sayHello} from './modules/greeting' ; import {sum, product} from './modules/math-functions' ;

Diese ermöglichen es uns, die Funktionen, Objekte oder Variablen zu verwenden, die in unseren exportierten Moduldateien enthalten sind.

Die Zeile, die import {sum, ...} from './modues/math-functions'; ermöglicht es uns, die sum in der Datei app.js so aufzurufen, als ob sie in derselben Datei definiert wäre! { app.js:12 }

 const a = 3 ; const b = 7 ; // ... resultSum.textContent = `The sum of $ {a} and $ {b} is $ {sum(a, b)} . ✨`;

Ziemlich glatt, wenn Sie mich fragen. 😎

Alles zusammenfügen

Das letzte Teil des Puzzles besteht darin, den Befehl webpack auszuführen, um den Build zu initiieren und webpack die Datei bundle.js erstellen bundle.js .

Dazu richten wir einen script in der Datei package.json { package.json:6 } ein.

 "scripts" : { "start" : "npm run webpack" , "webpack" : "webpack -d --watch" },

Unser benutzerdefinierter Befehl führt webpack im Debug-Modus aus, was dazu beiträgt, mehr Details bereitzustellen, wenn etwas in unserem Projekt nicht sofort funktioniert. Dieser Befehl legt auch fest, dass Webpack auf Änderungen in den JavaScript-Dateien achtet; Wenn wir eine Änderung vornehmen, bündelt bundle.js die Datei bundle.js automatisch für uns neu!

Öffnen Sie also kurz bevor Sie mit der Arbeit mit JavaScript im Projekt beginnen, Ihre Terminal-App, wechseln Sie in das Projektverzeichnis und geben Sie npm start . Sehen Sie zu, wie webpack die Konfiguration liest und die Datei bundle.js erstellt!

Terminal-App, die die Ergebnisse eines erfolgreichen Builds anzeigt, nachdem der Befehl „npm start“ ausgeführt wurde.

Von hier aus können Sie mit der Bearbeitung der JavaScript-Dateien beginnen und index.html in Ihren Browser laden, um Ihren ES6-Modulcode zu testen! 🎉

War diese Anleitung hilfreich? Würden Sie mir noch etwas vorschlagen, das ich vielleicht übersehen habe? Lass es mich wissen, bitte!

Fröhliches Hacken! 💻😄💖

Zurück zum Blog