Node.js - jQuery

Szerző: Sallai András
Copyright © 2021, Sallai András
Szerkesztve: 2021, 2024
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Bevezetés

Ebben a projektben a Node.js-t csak telepítésre használjuk.

Projekt készítése

mkdir projket01
cd projekt01
npm init

jQuery telepítése

npm install jquery

A jQuery csomag nem jó, elavult, írjuk kisbetűvel.

Használat

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Példa</title>
</head>
<body>
    <h1>Valami</h1>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

$('h1').html('más');

Szerver

Többféle szerver áll rendelkezésre; http-server, lite-server, live-server. Itt a live-servert fogjuk használni.

npm install live-server --save-dev

Használat:

npx live-server

A package.json fájlba a scripts tulajdonsághoz felvehetünk egy start bejegyzést:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server"
  },

A bejegyzés után a szerver így is indítható:

npm start

Csatolás

Ha közzé tesszük a weblapot, a ./node_modules/jquery/dist/jquery.js hivatkozás a weboldalon nem szokott jó lenni. A publikált HTML oldalak JavaScript programozói könyvtárait, általában egy /lib nevű könyvtárba tesszük. Ha így hagyjuk a <script> elemet, a feltöltés előtt javítani kell. Jó lenne egy olyan megoldás, ahol eleve /lib/jquery.js hivatkozást írunk.

Javítsuk a start bejegyzésünket:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server --mount='/lib/jquery.js:./node_modules/jquery/dist/jquery.js'"
  },

Ha a HTML oldalon hivatkozunk a lib/jquery.js célra, akkor átirányítás történik a node_modules/jquery/dist/jquery.js, ahol ténylegesen megtalálható a fájl.

src könyvtár

A forrásfájlokat egy src könyvtárba szokás tenni.

projekt01/
  |-node_modules/
  |  `-...
  |-src/
  |  |-index.html
  |  `-app.js
  `package.json

Javítsuk a package.json fájlban:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server ./src --mount='/lib/jquery.js:./node_modules/jquery/dist/jquery.js'"
  },

jQuery használata böngésző nélkül

Böngésző nélkül nincs window, document objektum. A tesztelés így nem megy. Megoldás a jsdom csomag

npm install jsdom --save-dev

index.js

const jsdom = require('jsdom');
const dom = new jsdom.JSDOM(`
<html>
    <head>
 
    </head>
    <body>
        <h1>Valami</h1>
    </body>
</html>`
);
const $ = require('jquery')(dom.window);
$('h1').html('más');
const content = dom.window.document.querySelector('body');
console.log(content.textContent);

Futtassuk:

node index.js

Második változat

index.js

const { JSDOM } = require('jsdom');
const { window } = new JSDOM('<h1>Valami</h1>');
const $ = require('jquery')(window);
 
 
$('h1').html('más');
const content = window.document.querySelector('body');
console.log(content.textContent);

A JSDOM() konstruktorban egy HTML oldalt kell átadni, string típusként. Ez lehet komplett weblap is.

Futtassuk:

node index.js

További információ:

https://github.com/jsdom/jsdom (2021)