web-dev-qa-db-fra.com

Puis-je utiliser jQuery avec Node.js?

Est-il possible d'utiliser les sélecteurs jQuery/la manipulation DOM côté serveur à l'aide de Node.js?

javascriptjquerynode.js
524
John

Update (27-Jun-18) : Il semble qu'il y ait eu une mise à jour majeure de jsdom qui empêche la réponse initiale de fonctionner . J'ai trouvé this réponse qui explique comment utiliser jsdom maintenant. J'ai copié le code correspondant ci-dessous.

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

var $ = jQuery = require('jquery')(window);

Remarque: La réponse d'origine ne mentionne pas le fait que vous devrez également installer jsdom à l'aide de npm install jsdom

Mise à jour (fin 2013) : L’équipe officielle de jQuery a finalement pris en charge la gestion du package jquery sur npm:

npm install jquery

Ensuite:

require("jsdom").env("", function (err, window) {
    if (err) {
        console.error(err);
        return;
    }
    var $ = require("jquery")(window);
});
547
Philippe Rathé

Oui, vous pouvez utiliser une bibliothèque que j'ai créée et appelée nodeQuery https://github.com/tblobaum/nodeQuery

var Express = require('express')
    , dnode = require('dnode')
    , nQuery = require('nodeQuery')
    , express = Express.createServer();

var app = function ($) {
    $.on('ready', function () {
        // do some stuff to the dom in real-time
        $('body').append('Hello World');
        $('body').append('<input type="text" />');
        $('input').live('click', function () {
            console.log('input clicked');
            // ...
        });
    });
};

nQuery
    .use(app);

express
    .use(nQuery.middleware)
    .use(Express.static(__dirname + '/public'))
    .listen(3000);

dnode(nQuery.middleware).listen(express);
54
Thomas Blobaum

Au moment de la rédaction, il existe également le Cheerio maintenu.

Mise en œuvre rapide, flexible et légère du noyau conçu par jQuery spécifiquement pour le serveur.

50
Alfred

En utilisant jsdom vous pouvez maintenant. Il suffit de regarder leur exemple jquery dans le répertoire des exemples.

38
Benjamin Coe

Un simple robot utilisant Cheerio

Voici ma formule pour créer un robot d'exploration simple dans Node.js. C’est la raison principale pour laquelle vous souhaitez effectuer une manipulation DOM sur le serveur et probablement la raison pour laquelle vous êtes arrivé ici.

Commencez par utiliser request pour télécharger la page à analyser. Une fois le téléchargement terminé, utilisez cheerio et lancez la manipulation DOM, comme si vous utilisiez jQuery.

Exemple de travail:

var
    request = require('request'),
    cheerio = require('cheerio');

function parse(url) {
    request(url, function (error, response, body) {
        var
            $ = cheerio.load(body);

        $('.question-summary .question-hyperlink').each(function () {
            console.info($(this).text());
        });
    })
}

parse('http://stackoverflow.com/');

Cet exemple imprimera sur la console toutes les principales questions figurant sur la page d'accueil de SO. C'est pourquoi j'aime Node.js et sa communauté. Ça ne pourrait pas être plus facile que ça :-)

Installez des dépendances:

demande d'installation npm cheerio

Et lancez (en supposant que le script ci-dessus est dans le fichier crawler.js):

noeud crawler.js

Codage

Certaines pages auront un contenu non anglais dans un certain encodage et vous devrez le décoder en UTF-8. Par exemple, une page en portugais brésilien (ou toute autre langue d'origine latine) sera probablement codée en ISO-8859-1 (a.k.a. "latin1"). Lorsque le décodage est nécessaire, je dis à request de ne pas interpréter le contenu de quelque manière que ce soit et utilise plutôt iconv-lite pour effectuer le travail.

Exemple de travail:

var
    request = require('request'),
    iconv = require('iconv-lite'),
    cheerio = require('cheerio');

var
    PAGE_ENCODING = 'utf-8'; // change to match page encoding

function parse(url) {
    request({
        url: url,
        encoding: null  // do not interpret content yet
    }, function (error, response, body) {
        var
            $ = cheerio.load(iconv.decode(body, PAGE_ENCODING));

        $('.question-summary .question-hyperlink').each(function () {
            console.info($(this).text());
        });
    })
}

parse('http://stackoverflow.com/');

Avant de lancer, installez les dépendances:

demande d'installation npm iconv-lite cheerio

Et puis finalement:

noeud crawler.js

Liens suivants

La prochaine étape serait de suivre les liens. Supposons que vous souhaitiez répertorier toutes les affiches de chaque question principale sur SO. Vous devez d’abord répertorier toutes les principales questions (exemple ci-dessus), puis saisir chaque lien et analyser la page de chaque question pour obtenir la liste des utilisateurs concernés.

Lorsque vous commencez à suivre des liens, un rappel de enfer peut commencer. Pour éviter cela, vous devriez utiliser une sorte de promesse, un avenir ou quoi que ce soit. Je garde toujours async dans ma palette d'outils. Donc, voici un exemple complet d'un robot utilisant async:

var
    url = require('url'),
    request = require('request'),
    async = require('async'),
    cheerio = require('cheerio');

var
    baseUrl = 'http://stackoverflow.com/';

// Gets a page and returns a callback with a $ object
function getPage(url, parseFn) {
    request({
        url: url
    }, function (error, response, body) {
        parseFn(cheerio.load(body))
    });
}

getPage(baseUrl, function ($) {
    var
        questions;

    // Get list of questions
    questions = $('.question-summary .question-hyperlink').map(function () {
        return {
            title: $(this).text(),
            url: url.resolve(baseUrl, $(this).attr('href'))
        };
    }).get().slice(0, 5); // limit to the top 5 questions

    // For each question
    async.map(questions, function (question, questionDone) {

        getPage(question.url, function ($$) {

            // Get list of users
            question.users = $$('.post-signature .user-details a').map(function () {
                return $$(this).text();
            }).get();

            questionDone(null, question);
        });

    }, function (err, questionsWithPosters) {

        // This function is called by async when all questions have been parsed

        questionsWithPosters.forEach(function (question) {

            // Prints each question along with its user list
            console.info(question.title);
            question.users.forEach(function (user) {
                console.info('\t%s', user);
            });
        });
    });
});

Avant de courir:

demande d'installation npm async cheerio

Effectuer un test:

noeud crawler.js

Exemple de sortie:

Is it possible to pause a Docker image build?
    conradk
    Thomasleveil
PHP Image Crop Issue
    Elyor
    Houston Molinar
Add two object in Rails
    user1670773
    Makoto
    max
Asymmetric encryption discrepancy - Android vs Java
    Cookie Monster
    Wand Maker
Objective-C: Adding 10 seconds to timer in SpriteKit
    Christian K Rider

Et c’est la base que vous devez savoir pour commencer à créer vos propres robots :-)

Bibliothèques utilisées

32
Lucio Paiva

en 2016, les choses sont bien plus faciles. installez jquery sur node.js avec votre console:

npm install jquery

associez-le à la variable $ (par exemple - je suis habitué) dans votre code node.js: 

var $ = require("jquery");

faire des trucs:

$.ajax({
    url: 'gimme_json.php',
    dataType: 'json',
    method: 'GET',
    data: { "now" : true }
});

fonctionne également pour gulp car il est basé sur node.js.

18
low_rents

Je crois que la réponse à cette question est maintenant oui.
https://github.com/tmpvar/jsdom

var navigator = { userAgent: "node-js" };  
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
17
rdzah

npm install jquery --save #noteTOUT TOUT LE MINUSCULE

npm install jsdom --save

const jsdom = require("jsdom");
const dom = new jsdom.JSDOM(`<!DOCTYPE html>`);
var $ = require("jquery")(dom.window);


$.getJSON('https://api.github.com/users/nhambayi',function(data) {
  console.log(data);
});
9
Noah

le module jQuery peut être installé à l'aide de:

npm install jquery

Exemple:

var $ = require('jquery');
var http = require('http');

var options = {
    Host: 'jquery.com',
    port: 80,
    path: '/'
};

var html = '';
http.get(options, function(res) {
res.on('data', function(data) {
    // collect the data chunks to the variable named "html"
    html += data;
}).on('end', function() {
    // the whole of webpage data has been collected. parsing time!
    var title = $(html).find('title').text();
    console.log(title);
 });
});

Références de jQuery dans Node.js **: 

8
SUNDARRAJAN K

Vous devez accéder à la fenêtre à l'aide de la nouvelle API JSDOM.

const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
4
UnchartedWorks

Mon code de travail est:

npm install jquery

et alors:

global.jQuery   = require('jquery');
global.$        = global.jQuery;

ou si la fenêtre est présente, alors:

typeof window !== "undefined" ? window : this;
window.jQuery   = require('jquery');
window.$        = window.jQuery;
3
Roman

ATTENTION

Cette solution, mentionnée par Golo Roden n’est pas correcte. Il s'agit simplement d'une solution rapide pour aider les utilisateurs à faire exécuter leur code jQuery à l'aide d'une structure d'application Node, mais ce n'est pas la philosophie du nœud, car jQuery est toujours en cours d'exécution côté client plutôt que côté serveur. Je suis désolé d'avoir donné une mauvaise réponse.

Vous pouvez également rendre Jade avec noeud et insérer votre code jQuery. Voici le code du fichier jade:

!!! 5
html(lang="en")
  head
    title Holamundo!
    script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js')
  body
    h1#headTitle Hello, World
    p#content This is an example of Jade.
    script
      $('#headTitle').click(function() {
        $(this).hide();
      });
      $('#content').click(function() {
        $(this).hide();
      });
2
Timbergus

Le module jsdom est un excellent outil. Mais si vous voulez évaluer des pages entières et faire des trucs géniaux côté serveur, je vous suggère de les exécuter dans leur propre contexte:

vm.runInContext

Ainsi, des choses comme require/CommonJS sur le site ne feront pas exploser votre processus de nœud.

Vous pouvez trouver la documentation ici . À votre santé!

1
Jakub Oboza

À partir de jsdom v10, la fonction .env () est obsolète. Je l'ai fait comme ci-dessous après avoir essayé beaucoup de choses pour exiger jQuery:

var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

var $ = jQuery = require('jquery')(window);

J'espère que cela vous aidera, vous ou toute autre personne confrontée à ce type de problèmes.

1
Plabon Dutta

Non. Il faudra déployer beaucoup d'efforts pour porter un environnement de navigateur sur un noeud.

Une autre approche, que je recherche actuellement pour les tests unitaires, consiste à créer une version "fictive" de jQuery qui fournit des rappels chaque fois qu'un sélecteur est appelé.

De cette façon, vous pourrez tester vos plugins jQuery sans avoir un DOM. Vous devrez toujours tester dans de vrais navigateurs pour voir si votre code fonctionne dans la nature, mais si vous découvrez des problèmes spécifiques au navigateur, vous pouvez facilement "simuler" ceux de vos tests unitaires.

Je vais pousser quelque chose à github.com/felixge une fois que c'est prêt à montrer.

0
Felix Geisendörfer

Vous pouvez utiliser Electron , il autorise les navigateurs et les nœuds hybrides.

Avant, j’essayais d’utiliser canvas2d dans nodejs, mais j’ai finalement abandonné. Il n’est pas supporté par nodejs default, et trop difficile à installer (beaucoup de ... dépendants) . Tant que je n’utilise pas Electron, je peux facilement utiliser tout mon code de navigateur précédent, même WebGL, et transmettre la valeur du résultat . result image base64) en code nodejs.

0
gonnavis

Tout d'abord l'installer 

npm install jquery -S

Après l'avoir installé, vous pouvez l'utiliser comme ci-dessous

import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();

Vous pouvez consulter le tutoriel complet ici: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7

0
Oyetoke Tobi