Comment partager du code entre Node.js et le navigateur ?

Le partage de code entre le backend et le frontend d'une application full-stack peut être une tâche difficile. Cependant, cela est essentiel pour créer des applications maintenables et évolutives. En partageant le code, nous évitons la duplication de code, réduisons le temps de développement et maintenons la cohérence entre les applications.

Dans ce tutoriel, nous explorerons différentes techniques de partage de code entre Node.js et le navigateur, et apprendrons comment choisir la meilleure méthode pour notre projet.

Technologie de partage de code entre Node.js et les navigateurs

Les utilisateurs peuvent partager du code entre node.js et les navigateurs comme suit -

Module CommonJS

Les modules CommonJS sont un moyen simple et largement utilisé d'organiser et de partager du code dans Node.js. De nombreux packages Node.js sont construits à l'aide de modules CommonJS car ils sont faciles à utiliser.

Cependant, ils ne fonctionnent pas par défaut dans le navigateur. Pour utiliser les modules CommonJS dans le navigateur, nous devons utiliser des outils comme Browserify ou Webpack. Ces outils peuvent créer un seul fichier JavaScript pouvant s'exécuter dans Node.js et le navigateur. Selon l'environnement cible, ils peuvent également convertir notre code de CommonJS en modules ES ou vice versa.

Si nous construisons une application Node.js et que nous souhaitons réutiliser du code côté serveur dans le navigateur, les modules CommonJS sont un bon choix.

Module ES

Les modules ES sont un moyen moderne et natif d'organiser et de partager du code sur les navigateurs Web et Node.js. Ils sont simples à utiliser et de nombreux frameworks front-end modernes, tels que React et Vue.js, prennent en charge les modules ES prêts à l'emploi

Nous pouvons partager du code entre Node.js et le navigateur à l'aide de gestionnaires de packages comme npm ou Yarn. Nous pouvons publier le code sous forme de package et l'installer dans les deux environnements à l'aide d'un gestionnaire de packages.

Si nous souhaitons utiliser une manière moderne et standardisée d'organiser et de partager le code entre le backend et le frontend de l'application, les modules ES sont un excellent choix.

JavaScript universel

JavaScript universel, également connu sous le nom de JavaScript isomorphe, nous permet d'écrire du code qui s'exécute à la fois sur le serveur et sur le client. Cela permet d'améliorer les performances, de réduire les temps de chargement des pages et d'améliorer le référencement.

JavaScript universel nécessite beaucoup de configuration initiale et peut être complexe à mettre en place. De plus, certaines bibliothèques et API peuvent fonctionner différemment sur le serveur et sur le client, provoquant des erreurs inattendues.

C'est un bon choix si nous avons besoin de créer une application performante et évolutive avec un rendu côté serveur et que nous souhaitons partager autant de code que possible entre le backend et le frontend.

En comprenant ces trois méthodes, les utilisateurs peuvent choisir celle qui correspond le mieux aux exigences de leur projet et à leurs préférences de développement.

Utilisez Webpack pour partager le code Node.js avec les navigateurs

Les outils de création comme Webpack sont un moyen puissant de partager du code entre Node.js et le navigateur. Les utilisateurs peuvent suivre ces étapes pour partager du code entre Node.js et les navigateurs à l'aide de Webpack -

Étape 1 - Tout d'abord, nous devons installer Webpack sur notre ordinateur.

npm install --save-dev webpack webpack-cli 

Étape 2 - Ensuite, nous devons créer un fichier de configuration Webpack pour spécifier comment regrouper notre code. Voici un exemple simple du fichier :

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

Étape 3 - Après cela, nous pouvons écrire le code comme nous le ferions normalement dans Node.js ou dans le navigateur.

Étape 4 - Nous devons maintenant regrouper notre code à l'aide de la commande suivante -

npx webpack --mode=development 

Étape 5 - Enfin, nous pouvons utiliser le bundle dans une application Node.js ou un navigateur en l'incluant dans un fichier HTML ou en l'exigeant dans le code Node.js.

Par exemple, si nous utilisons la configuration par défaut de l'étape 2, nous pouvons inclure le package dans un fichier HTML comme celui-ci -

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

Exemple

Cet exemple montre comment définir et exporter des fonctions pour Node.js et les navigateurs à l'aide de méthodes JavaScript courantes. Dans le fichier myLibrary.js, nous définissons deux fonctions greet() et goodbye(), qui peuvent être utilisées dans les environnements Node.js et de navigateur. Le code vérifie si le module existe et exporte les fonctions de Node.js tout en les exportant vers l'objet fenêtre du navigateur.

Dans le fichier index.js, nous utilisons la fonction require() pour importer le module myLibrary.js, puis appelons la fonction exportée goodbye() avec des paramètres.

Dans le fichier index.html, nous incluons le fichier myLibrary.js comme balise de script, puis utilisons la balise de script pour appeler la fonction exportée greet() avec des paramètres.

De cette façon, nous pouvons créer une base de code commune et réutilisable qui peut être utilisée à la fois dans les environnements Node.js et de navigateur, et le code s'exécutera correctement dans chaque environnement.

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>

Sortie

Dans ce didacticiel, les utilisateurs ont appris différentes techniques de partage de code entre Node.js et le navigateur, notamment les modules CommonJS, les modules ES et le JavaScript universel. Chaque méthode a ses avantages et ses inconvénients, et le choix dépend des exigences du projet et des préférences de développement.

En suivant les étapes mentionnées dans ce didacticiel, les utilisateurs peuvent créer un fichier de configuration Webpack qui spécifie comment leur code doit être regroupé, leur permettant d'écrire du code comme ils le feraient normalement dans Node.js ou dans le navigateur. Nous avons également vu des exemples d'utilisation de méthodes JavaScript courantes pour définir des fonctions exportées pour Node.js et les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!