TypeScript projekt start

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

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

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 Node.js 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 Node.js alkalmazásokhoz használható.

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "outDir": "./app",
        "strict": true,
        "esModuleInterop": true
    }
}

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.

{
    "compilerOptions": {
        "moduleResolution": "bundler"
    }
}

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.

  "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/\""