[[oktatas:web:nodejs|< Node.js]]

====== Babel ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztés: 2021, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== A Babel =====

A Babel segítségével egyetlen fájlba írhatjuk a külön JavaScript fájlok tartalmát, és
fordítást is végezhetünk rajtuk.

  * https://babel.dev/ (2024)

===== Telepítés =====

  npm install --global babel-cli

Ellenőrzés:
  babel --version

===== JavaScript tartalom =====


Képernyőre:
  babel src

Irányítsuk fájlba:
  babel src > index.js


Másolás másik könyvtárba:
  babel src --out-dir es5


===== Kiterjesztés hozzáadása =====
==== Alap ====

  pnpm add --save-dev @babel/core @babel/cli


<code>
app01/
  |-src/
  |  |-app.js
  |  `-emp.js
  |-babel.config.json
  `-package.json
</code>


<code javascript src/emp.js>
export class Employee {
    constructor() {
        this.name = 'névtelen';
        this.city = 'ismeretlen';
    }
}
</code>


<code javascript src/app.js>
import { Employee } from "./emp";

new Employee();
</code>


==== Kiterjesztés megadása ====

Webhely:
  * https://codeberg.org/karl/babel-plugin-add-import-extension.git (2024)

  pnpm add --save-dev babel-plugin-add-import-extension

<code javascript babel.config.json>
{
    "plugins": ["babel-plugin-add-import-extension"]
}

</code>



Fordítás:
  npx babel src --out-dir dist


==== Eredmény ====

<code>
app01/
  |-dist/
  |  |-app.js
  |  `-emp.js
  |-src/
  |  |-app.js
  |  `-emp.js
  |-babel.config.json
  `-package.json     
</code>


<code javascript dist/emp.js>
export class Employee {
  constructor() {
    this.name = 'névtelen';
    this.city = 'ismeretlen';
  }
}
</code>

<code javascript dist/app.js>
import { Employee } from "./emp.js";
new Employee();
</code>