Wie teile ich Code zwischen Node.js und dem Browser?

Der Austausch von Code zwischen Backend und Frontend einer Full-Stack-Anwendung kann eine herausfordernde Aufgabe sein. Es ist jedoch für die Erstellung wartbarer und skalierbarer Anwendungen unerlässlich. Durch die gemeinsame Nutzung von Code vermeiden wir Codeduplizierungen, verkürzen die Entwicklungszeit und sorgen für die anwendungsübergreifende Konsistenz.

In diesem Tutorial erkunden wir verschiedene Techniken zum Teilen von Code zwischen Node.js und dem Browser und erfahren, wie wir die beste Methode für unser Projekt auswählen.

Technologie zum Teilen von Code zwischen Node.js und Browsern

Benutzer können Code wie folgt zwischen node.js und Browsern teilen -

CommonJS-Modul

CommonJS-Module sind eine weit verbreitete und einfache Möglichkeit, Code in Node.js zu organisieren und zu teilen. Viele Node.js-Pakete werden mit CommonJS-Modulen erstellt, weil sie einfach zu verwenden sind.

Allerdings funktionieren sie standardmäßig nicht im Browser. Um CommonJS-Module im Browser nutzen zu können, müssen wir Tools wie Browserify oder Webpack verwenden. Diese Tools können eine einzelne JavaScript-Datei erstellen, die in Node.js und im Browser ausgeführt werden kann. Abhängig von der Zielumgebung können sie unseren Code auch von CommonJS in ES-Module konvertieren oder umgekehrt.

Wenn wir eine Node.js-Anwendung erstellen und serverseitigen Code im Browser wiederverwenden möchten, sind CommonJS-Module eine gute Wahl.

ES-Modul

ES-Module sind eine moderne und native Möglichkeit, Code über Webbrowser und Node.js hinweg zu organisieren und zu teilen. Sie sind einfach zu verwenden und viele moderne Front-End-Frameworks wie React und Vue.js unterstützen ES-Module sofort

Wir können Code zwischen Node.js und dem Browser teilen, indem wir Paketmanager wie npm oder Yarn verwenden. Wir können den Code als Paket veröffentlichen und ihn mithilfe eines Paketmanagers in beiden Umgebungen installieren.

Wenn wir eine moderne und standardisierte Methode zum Organisieren und Teilen von Code zwischen dem Backend und dem Frontend der Anwendung verwenden möchten, sind ES-Module eine gute Wahl.

Universelles JavaScript

Universelles JavaScript, auch als isomorphes JavaScript bekannt, ermöglicht es uns, Code zu schreiben, der sowohl auf dem Server als auch auf dem Client ausgeführt wird. Dies trägt dazu bei, die Leistung zu verbessern, die Seitenladezeiten zu verkürzen und die SEO zu verbessern.

Universelles JavaScript erfordert viel Vorabkonfiguration und kann komplex einzurichten sein. Darüber hinaus funktionieren einige Bibliotheken und APIs möglicherweise unterschiedlich auf dem Server und dem Client, was zu unerwarteten Fehlern führen kann.

Dies ist eine gute Wahl, wenn wir eine leistungsstarke und skalierbare Anwendung mit serverseitigem Rendering erstellen müssen und so viel Code wie möglich zwischen Backend und Frontend teilen möchten.

Durch das Verständnis dieser drei Methoden können Benutzer diejenige auswählen, die ihren Projektanforderungen und Entwicklungspräferenzen am besten entspricht.

Verwenden Sie Webpack, um Node.js-Code mit Browsern zu teilen

Build-Tools wie Webpack sind eine leistungsstarke Möglichkeit, Code zwischen Node.js und dem Browser auszutauschen. Benutzer können diese Schritte ausführen, um mithilfe von Webpack -

Schritt 1 – Zuerst müssen wir Webpack auf unserem Computer installieren.

npm install --save-dev webpack webpack-cli 

Schritt 2 – Als nächstes müssen wir eine Webpack-Konfigurationsdatei erstellen, um anzugeben, wie wir unseren Code bündeln. Hier ist ein einfaches Beispiel der Datei:

module.exports = {
   entry: './src/index.js',
   output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
   }
}; 

Schritt 3 – Danach können wir den Code wie gewohnt in Node.js oder im Browser schreiben.

Schritt 4 – Jetzt müssen wir unseren Code mit dem folgenden Befehl bündeln –

npx webpack --mode=development 

Schritt 5 – Schließlich können wir das Bundle in einer Node.js- oder Browseranwendung verwenden, indem wir es in eine HTML-Datei einbinden oder im Node.js-Code anfordern.

Wenn wir beispielsweise die Standardkonfiguration aus Schritt 2 verwenden, können wir das Paket in eine HTML-Datei wie diese einbinden –

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title> My App </title>
   </head>
   <body>
      <script src = "dist/bundle.js"> </script>
   </body>
</html>

Beispiel

Dieses Beispiel zeigt, wie Funktionen für Node.js und Browser mithilfe gängiger JavaScript-Methoden definiert und exportiert werden. In der Datei „myLibrary.js“ definieren wir zwei Funktionen „greet()“ und „goodbye()“, die in Node.js- und Browserumgebungen verwendet werden können. Der Code prüft, ob das Modul existiert und exportiert die Funktionen von Node.js, während er sie in das Fensterobjekt des Browsers exportiert.

In der Datei index.js verwenden wir die Funktion require(), um das Modul myLibrary.js zu importieren, und rufen dann die exportierte Funktion goodbye() mit Parametern auf.

In der Datei index.html fügen wir die Datei myLibrary.js als Skript-Tag ein und verwenden dann das Skript-Tag, um die exportierte Funktion „greet()“ mit Parametern aufzurufen.

Auf diese Weise können wir eine gemeinsame und wiederverwendbare Codebasis erstellen, die sowohl in Node.js- als auch in Browserumgebungen verwendet werden kann und der Code in jeder Umgebung korrekt ausgeführt wird.

myLibrary.js

if (typeof module !== 'undefined' && module.exports) {
   
   // code for Node.js 
   module.exports = {
      
      // exported functions or objects for Node.js
      greet: function(name) {
         console.log('Hello, ' + name + '!');
      },
      goodbye: function(name) {
         console.log('Goodbye, ' + name + '!');
      }
   };
} else {
   
   // code for the browser
   window.myLibrary = {
      
      // exported functions or objects for the browser
      greet: function(name) {
         alert('Hello, ' + name + '!');
      },
      goodbye: function(name) {
         alert('Goodbye, ' + name + '!');
      }
   };
}

index.js

const myLibrary = require('./myLibrary');
myLibrary.goodbye('Subham'); 

index.html

<html lang="en">
<head>
   <title> NodeJs & Browser </title> 
</head>
<body>
   <script src = "myLibrary.js" > </script>
   <script>
      myLibrary.greet('Subham');
   </script>
</body>
</html>

Ausgabe

In diesem Tutorial lernten Benutzer verschiedene Techniken zum Teilen von Code zwischen Node.js und dem Browser kennen, darunter CommonJS-Module, ES-Module und universelles JavaScript. Jede Methode hat ihre Vor- und Nachteile und die Wahl hängt von den Projektanforderungen und Entwicklungspräferenzen ab.

Durch Befolgen der in diesem Tutorial genannten Schritte können Benutzer eine Webpack-Konfigurationsdatei erstellen, die angibt, wie ihr Code gebündelt werden soll, sodass sie Code wie gewohnt in Node.js oder im Browser schreiben können. Wir haben auch ein Beispiel gesehen, wie exportierte Funktionen für Node.js und den Browser mithilfe eines gängigen JavaScript-Ansatzes definiert werden.

Das obige ist der detaillierte Inhalt vonWie teile ich Code zwischen Node.js und dem Browser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!