Tartalomjegyzék

< Node.js

Node.js - jQuery

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ó: