szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:typescript|< TypeScript]]

====== TypeScript projekt start ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Előkészítés =====

Szükségünk van TypeScript fordítóra. Globális használat esetén:

  npm install --save-dev -g typescript

  mkdir app01
  cd app01


===== Fejlesztés src könyvtárban =====

<code>
app01/
  |-src/
  |  |-app.js
  |  |-app.ts
  |  `-index.html
  |-bs-config.json
  |-package.json
  `-tsconfig.json
</code>


  npm init -y

  npm install --save-dev lite-server


<code javascript package.json>
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server",
    "ts": "tsc --watch"
  },
</code>



<code javascript tsconfig.json>
{
    "compilerOptions": {
        "rootDir": "src", 
        "target": "es6"
    }	
}
</code>

<code javascript bs-config.json>
{
    "server": ["src"], 
    "port": 3000
}
</code>

lite-server és fordító indítása külön terminálban:
  npm start
  npm run ts


===== Az src és dist könyvtár használata =====

Az src könyvtárba tesszük a forrásfájlokat. 
A dist könyvtárba kész webhely kerül. 



==== Fájlok másolása ====

A .html és .js fájlokat átmásoljuk a dist könyvtárba.
Ehhez szükséges a copyfiles Node.js csomag.

Telepítés:
  npm install --save-dev copyfiles

Vagy copy-and-watch:
  npm install --save-dev copy-and-watch


==== package.json ====

<code javascript>
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "copyfiles -u 1 src/**/*.{html,css,js} dist/",
  },
</code>


<code javascript>
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "copy-and-watch --clean src/**/*.{html,js} dist",
  },
</code>


==== Használat ====

  npm run build

A JavaScript, a HTML és a CSS állományokat a dist könyvtárba másolja.



==== A dist törlése ====

Törölhetjük a dist könyvtárat műveletek előtt.

A törlést a copy-and-watch maga is megcsinálja.

Telepítsük a rimraf csomagot:
  npm install --save-dev rimraf

Majd írjunk egy pre kampót (hook):
<code javascript package.json>
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prebuild": "rimraf dist",
    "build": "copyfiles -u 1 src/**/*.{html,css,js} dist",
    "start": "lite-server"
  },
</code>


Csak törléshez írhatunk egy clean feladatot:
<code javascript package.json>
  "scripts": {

    "clean": "rimraf dist",

  },
</code>

===== Beállítás állományok generálása =====

  tsc --init

A parancs generál egy tsconfig.json fájlt. 

Keressük meg a tsconfig.json fájlban a következő két sort:
<code javascript>
  //  "rootDir": "./", 
  
  //...
  
  // "outDir": "./dist",
</code>

Vegyük ki megjegyzésből:
<code javascript>
  "rootDir": "./src", 
  
  //...
  

  "outDir": "./dist",

</code>

==== A module tulajdonság ====

Keressük meg a module értéket:
<code javascript>
  "module": "commonjs",
</code>


Lehetséges értékek:
  * None, ES6 vagy ES2015, ES2020, UMD, AMD, System, és ESNext

Az alapértelmezett commonjs érték szerveroldali JavaScript,
azaz Node.js alkalmazásokhoz használható. 

===== tsconfig.json =====

<code javascript tsconfig.json>
{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "outDir": "./app",
        "strict": true,
        "esModuleInterop": true
    }
}
</code>

A TypeScript modulok feloldásának módja. Modernebb modulok használata esetén kevesebb feloldási hibával találkozunk bundler érték beállításával.

<code javascript>
{
    "compilerOptions": {
        "moduleResolution": "bundler"
    }
}
</code>

A bundler érték arra utal, hogy a modulok feloldását a modern JavaScript csomagkezelők és bundlerek (mint például a webpack, Rollup vagy esbuild) által használt módszerekhez hasonlóan kell elvégezni.


===== Függelék =====
==== package.json ====

<code javascript>
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postbundle": "copyfiles -u 1 src/**/*.{html,css} dist/",
    "bundle": "tsc"
  },
</code>

A bundle helyett tetszőleges név megadható, de a copyfiles sorban 
szükséges a bundle előtt a "post".

A -u 1, azt mondja, hogy vágjon le az útvonalból 1 részt. 
Ez az 1 rész a src könyvtár lesz. Nélküle, az src mappa is
a dist könyvtárba másolódik. 

A <nowiki>src/**/*.{html,css}</nowiki> hatására a .html és .css kiterjesztésű 
fájlok is másolásra kerülnek. Ha csak a .html fájlokra van szükség,
akkor egyszerűsíthető:
<code javascript>
"postbundle": "copyfiles -u 1 src/**/*.html dist/",
</code>

Ha van web könyvtár is:
<code javascript>
"postbundle": "copyfiles -u 2 \"./src/web/**/*.{css,html}\" \"./dist/web/\""
</code>