Tartalomjegyzék

JavaScript modulok

< JavaScript

JavaScript modulok

Szerző: Sallai András
Copyright © 2021, Sallai András
Szerkesztve: 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 - Node.js

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:

modules/employee.js

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

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

app.js

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:

package.json

{
    "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 Node.js-el is. Node.js modult ezzel szemben .cjs kiterjesztéssel látták el.

ES6 elnevezett függvény exportja

Nulla vagy több exportált modul.

index.html

index.html

<!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>

app.js

app.js

import { egy } from './modul.js';
 
console.log(egy())

modul.js

modul.js

export var egy = () => {
    return 'bármi';
}

package.json

package.json

{
  "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 { } kapcsos-zárójeleket.

ES6 elnevezett osztály exportja

Nulla vagy több exportált modul.

index.html

index.html

<!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>

app.js

app.js

import { Egy, Ketto} from './modul.js';
 
console.log(new Egy().ker())
console.log(new Ketto().csinal())

modul.js

modul.js

export class Egy {
    ker() {
        return 'valami';
    }
}
 
export class Ketto {
    csinal() {
        return 'ezaz';
    }
}

package.json

package.json

{
  "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.

index.html

index.html

<!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>

app.js

Nem használunk {} az „egy” körül:

app.js

import egy from './modul.js';
 
console.log(egy())

modul.js

Névtelen függvényt használunk:

modul.js

export default () => {
    return 'bármi';
}

package.json

package.json

{
  "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.

index.html

index.html

<!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>

app.js

Nem használunk {} az „egy” körül:

app.js

import egy from './modul.js';
 
console.log(new egy().ker())

modul.js

Névtelen osztályt használunk:

modul.js

export default class {
    ker() {
        return 'valami';
    }
}

package.json

package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "devDependencies": {
    "lite-server": "^2.6.1"
  }  
}

Több függvény exportálása ES6 esetén

rhombus.js

function calcRadius(side, alpha) {
    if(!isValidInput(side)) {
        throw new Error('Hiba! Az oldal érték hibás!')
    }
    if(!isValidInput(alpha)) {
        throw new Error('Hiba! Az szög érték hibás!')
    }
    let rad = alpha * Math.PI / 180
    return 1.0/2.0 * side * Math.sin(rad)
}
 
function isValidInput(input) {
    let inputStr = String(input)
    if(!inputStr.match(/^[0-9]+$/)) {
        return false
    }
    if(input <= 0) {
        return false
    }
    return true
}
 
export { calcRadius, isValidInput }

Link

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