• Szerző: Sallai András
• Copyright © Sallai András, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

npm install --save-dev -g typescript

mkdir app01
cd app01

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

npm init -y

npm install --save-dev lite-server

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server",
    "ts": "tsc --watch"
  },

tsconfig.json

{
    "compilerOptions": {
        "rootDir": "src", 
        "target": "es6"
    }	
}

bs-config.json

{
    "server": ["src"], 
    "port": 3000
}

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

npm start
npm run ts

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

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

Telepítés:

npm install --save-dev copyfiles

Vagy copy-and-watch:

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

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

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

npm run build

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

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

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"
  },

Csak törléshez írhatunk egy clean feladatot:

package.json

  "scripts": {
 
    "clean": "rimraf dist",
 
  },

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:

  //  "rootDir": "./", 
 
  //...
 
  // "outDir": "./dist",

Vegyük ki megjegyzésből:

  "rootDir": "./src", 
 
  //...
 
 
  "outDir": "./dist",

Keressük meg a module értéket:

  "module": "commonjs",

Lehetséges értékek:

• None, ES6 vagy ES2015, ES2020, UMD, AMD, System, és ESNext

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

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

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 src/**/*.{html,css} 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ő:

"postbundle": "copyfiles -u 1 src/**/*.html dist/",

Ha van web könyvtár is:

"postbundle": "copyfiles -u 2 \"./src/web/**/*.{css,html}\" \"./dist/web/\""

bs-config.json

{
    "server": [
        "dist", 
        "node_modules/bootstrap/dist"],
        "port": 8000
}

A dist könyvtár mögött nem írtam css vagy js könyvtárat. így jó mindkettőhöz, viszont a HTML állományban szükséges a ezeket megadni:

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>