Utiliser le module jQuery NPM
NPM fait partie du package node.js. Ce tutoriel montre comment installer et utiliser le module jQuery npm.
Utiliser le module jQuery NPM
Installer Node.js avec NPM
Pour utiliser d’abord le module jQuery npm, nous devons d’abord installer le module npm, qui est inclus dans le package node.js. Accédez à ce lien et téléchargez votre programme d’installation.
Une fois le programme d’installation téléchargé, l’étape suivante consiste à exécuter le programme d’installation.
Après avoir exécuté le programme d’installation, appuyez sur Suivant et acceptez l’accord ; après cela, appuyez trois fois sur Suivant.
Cochez l’option installer automatiquement les outils nécessaires, cliquez sur Suivant puis cliquez sur Installer.
Une fois l’installation terminée, cliquez sur Terminer, et le Node.js avec npm est installé.
Vérifiez l’installation via l’invite de commande ou PowerShell. Exécutez la commande suivante.
npm -v
Une fois le Node.js avec npm installé, l’étape suivante consiste à installer le module jquery avec npm.
Installer jquery avec NPM
Assurez-vous d’installer le module jquery, et non le jquery. Suivez les étapes ci-dessous.
Étape 1 : Créez le fichier package.json en utilisant la commande suivante dans l’invite de commande pour garder une trace des dépendances et des modules.
npm init -y
La sortie de la commande ci-dessus ressemblera à ceci :
C:\>npm init -y
Wrote to C:\package.json:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Étape 2 : Installez le module jquery ; utilisez la commande suivante.
npm install jquery
Étape 3 : Une fois le module jquery installé, l’étape suivante consiste à installer jsdom car jQuery est une bibliothèque frontale ; c’est pourquoi il a besoin d’une fenêtre pour les opérations de backend. Utilisez la commande suivante pour installer jsdom.
npm install jsdom
Etape 4 : Importez le module jsdom en JavaScript.
const dom = new jsdom.JSDOM("")
Etape 5 : Créez une nouvelle fenêtre jsdom créée par l’objet jsdom avec le code HTML en paramètre. Voir l’exemple ci-dessous.
const dom = new jsdom.JSDOM("")
Étape 6 : Importez maintenant jquery et fournissez-lui une fenêtre. Utilisez le code suivant.
const jquery = require('jquery')(dom.window)
Essayons maintenant un exemple pour utiliser jquery avec npm. Voir exemple :
// Import the jsdom module
const jsdom = require('jsdom');
// Create a window with a document
const dom = new jsdom.JSDOM(`<!DOCTYPE html>
<body>
<h2> DELFTSTACK </h2>
<p>This is delftstack.com</p>
</body>
`);
// Import the jquery with window
const jquery = require('jquery')(dom.window);
// Append a HTML element to the body
jquery('body').append('<p> The Best Tutorial Site </p>');
// Get the content of the body
const Body_Content = dom.window.document.querySelector('body');
// Print the content of body
console.log(Body_Content.textContent);
Le code ci-dessus utilisera npm jquery pour ajouter du contenu HTML au corps. Voir la sortie :
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook