< JavaScript

JavaScript modulok

Szerző: Sallai András

Copyright © Sallai András, 2021, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Modulokról

Kétféle modult használatos

ES6 - böngészők számára tervezve

CommonJS - nem böngészők számára tervezve - NodeJS

Az ES6 modul böngészőkben is használható modul. Arról ismerhetjük fel, hogy export, import utasításokat használ:

export

import

A CommonJS szabvány felismerhető a következő utasításokról:

require()

module.exports

ES modul

Legyen egy modules könyvtár amelyben egy employee.js állományban egy Employee osztályt tartunk:

export class Employee { static create(name) { return 'hello ' + name; } }

Az app.js fájlban használatba vesszük a modult, az import paranccsal:

import { Employee } from "./modules/employee.js"; const egy = Employee.create('Para Béla'); console.log(egy);

Futtatás böngészőből

Az index.html fájlba ezt írjuk:

<script type="module" src="app.js"></script>

Vegyük észre a type attribútumot.

Futtatás node paranccsal

A futtatáshoz szükség van a package.json fájlban egy type tulajdonságra, module értékkel:

{ "type": "module", }

Ezzel megmondjuk, hogy ES6 modulként szeretnénk futtatni.

node app

A package.json fájl, type tulajdonság lehetőség előtt a fájlok kiterjesztése ES6 modul esetén .mjs volt, így lehetett futtatni NodeJS-el is. NodeJS modult ezzel szemben .cjs kiterjesztéssel látták el.

ES6 elnevezett függvény exportja

Nulla vagy több exportált modul.

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Karakterlánc</h1> <script type="module" src="app.js"></script> </body> </html>
import { egy } from './modul.js'; console.log(egy())
export var egy = () => { return 'bármi'; }
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "lite-server" } }

Az importálás során { } párost kell használni, ebbe kell beírni az importált függvényt nevét. Az importálás módja határozza meg, hogy kell írni { } kapcsos-zárójeleket.

ES6 elnevezett osztály exportja

Nulla vagy több exportált modul.

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Karakterlánc</h1> <script type="module" src="app.js"></script> </body> </html>
import { Egy, Ketto} from './modul.js'; console.log(new Egy().ker()) console.log(new Ketto().csinal())
export class Egy { ker() { return 'valami'; } } export class Ketto { csinal() { return 'ezaz'; } }
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "lite-server" }, "devDependencies": { "lite-server": "^2.6.1" } }

Az importálás során { } párost kell használni, ebbe kell beírni az importált függvényt nevét. Az importálás módja határozza meg, hogy kell írni { } kapcsoszárójeleket.

ES6 default export

Egyetlen exportált elem (modul) esetén használjuk.

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Karakterlánc</h1> <script type="module" src="app.js"></script> </body> </html>

„”

import egy from './modul.js'; console.log(egy())
export default () => { return 'bármi'; }
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "lite-server" }, "devDependencies": { "lite-server": "^2.6.1" } }

Ahol importáljuk a modult, az elnevezés tetszőleges, mivel a modulnak nincs neve.

ES6 default export osztállyal

Egyetlen névtelen osztály esetén használjuk.

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Karakterlánc</h1> <script type="module" src="app.js"></script> </body> </html>

„”

import egy from './modul.js'; console.log(new egy().ker())
export default class { ker() { return 'valami'; } }
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "lite-server" }, "devDependencies": { "lite-server": "^2.6.1" } }

Link

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export (2022)