VS Code/TypeScript Web Template Update

Da ich für RxJS Tests ein kleines TypeScript Projekt benötigte und nicht gleich ein Angular Projekt anlegen wollte, dachte ich mir, es ist Zeit meine Start Templates für Visual Studio Code (VS Code) und TypeScript mal wieder auszuprobieren und gegeben falls zu aktualisieren. Ich will hier auf die Änderungen eingehen, aber auch mal wieder zeigen, wie ich das Webtemplate generiert habe.

0. Was hat sich geändert/bewährt?

Im Mai 2019 habe ich das letzte Mal die Start Templates aktualisiert (VS Code/TypeScript Start Template für Node.js und Web Applikationen). Man kann es noch immer exakt gleich benutzen. Ich habe nun aber die Libraries aktualisiert, den lite-server diesmal durch den webpack-dev-server ersetzt und man benötigt keine global installierten npm Packages mehr. Das Template besteht eigentlich aus zwei Templates: Node.js und Web Applikation Start Template. Ich habe den Schwerpunkt wieder auf das Web Applikation Start Template gelegt. Das Template ist auf GitHub verfügbar (/FranzHelm/starter-typescript2/).

Anmerkung:

Warum das Ganze (Motivation) und wie startet man damit (Schnellstart, inkl. Videos), findet man auf

VS Code/TypeScript Start Template für Node.js und Web Applikationen)

1. Durchgeführte Anpassungen

Welche Anpassungen wurden durchgeführt, um das neue Start Template zu generieren.

1.1 Beobachtungen

WebPack wird immer wichtiger, es wird in fast allen Frameworks eingesetzt.
Debuggen in Visual Studio Code macht fast niemand, man verwendet die Browser Entwicklertools (F12 Tools) dafür.
Man installiert npm packages, die man benötigt um ein cli davon zu benutzen, immer seltener global. Das Took npx hilft einem dabei, dies zu vermeiden.
Yarn, statt npm, hat sich nicht durchgesetzt
Docker als Entwicklungsumgebung wird immer beliebter (Dies ist in diesem Dokument noch nicht berücksichtigt.)
Sourcecode liegt in einem TypeScript Projekt meist unter src (Das hatte ich bisher im WebTemplate nicht.)

1.2 Start

Um das Paket upzudaten, habe ich wieder begonnen, das Template neu aufzubauen.

Mit dem TypeScript Compiler ein neues Projekt anlegen:

tsc --init

besser:

npx tsc --init

npx

NPX ist ein Tool, das mit npm installiert wird. Es ermöglicht das Ausführen von Node Packages, die nicht mal installiert sein müssen. Findet npx die aktuellen Pakete nicht, werden sie temporär downgeloaded und ausgeführt.

Compiler Options (tsconfig.json)

Die Compiler Options im tsconfig.json File ein wenig angepasst:

  "compilerOptions": {
    ...
    "target": "es2015",
    "module": "es2020",
    ...
    "declaration": true,
    ...
    "sourceMap": true,
    ...
    "outDir": "./dist/", 
    ...
    "strict": false,
    ...
    "moduleResolution": "node",
    ...

1.3 Libraries update

Ich arbeite gerne mit ncu (npm-check-updates) um herauszufinden, welche libraries aktualisiert werden sollten.

In diesem Fall (neues Projekt) habe ich nun aber die neuesten Versionen hinzugefügt:

npm install typescript --save-dev
npm install lodash
npm install @types/lodash --save-dev

npm install webpack webpack-cli html-webpack-plugin webpack-dev-server ts-loader --save-dev

Npm benötigt den Hinweis --save nicht mehr, es werden die Libraries trotzdem in den dependencies im package.json File abgelegt. Außer man will die libraries unter devDependencies einordnen lassen, dann benötigt man den Schalter --save-dev.

{
  "name": "webproj1",
  "version": "3.0.0",
  "description": "A TypeScript + Web Application - Start Template for VS Code",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --open",
    "watch": "webpack --watch",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.168",
    "html-webpack-plugin": "^5.2.0",
    "ts-loader": "^8.0.17",
    "typescript": "^4.2.3",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Da WebPack immer beliebter wird, wollte ich auch den WebPack-Dev-Server statt lite-server, wie letztens, nun einsetzen. Das Start Script wird dadurch sehr einfach ("start": "webpack serve --open"), die Konfiguration dagegen etwas aufwendiger

1.4 WebPack-Dev-Server

Hier sieht man, dass ich den Sourcecode verschoben habe, ich habe eine Ebene src eingezogen.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/app/main.ts',
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
     template: 'src/index.html',
    }),
  ],
  devServer: {
    contentBase: [
      path.resolve(__dirname, 'dist'),
      path.resolve(__dirname, 'src/assets'),
    ],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
};

Der Teil devServer definiert zwei Content Base, somit kann man auch statischen Content ausliefern lassen (und zwar, alles was in src/assets liegt). Damit man das ausprobieren kann, liefert das Template ein File src/assets/style.css mit.

Das generierte bundle.js und index.html liegen im dist Ordner, die statischen Dateien im src/assets Ordner. Der dist Ordner wird im WebPack-Dev-Server temporär im Speicher gehalten, es kann jedoch praktisch sein, die Files zu sehen:

devServer: {
    writeToDisk: true,

Diese Optionen findet man alle in der WebPack DevServer Doku.

2. Fazit

Ein paar kleine Anpassungen, damit das Web Template wieder den aktuellen Trends folgt: Struktur der Sourcefiles, WebPack als DevServer, npx für command line tools von npm packages. Dies soll nicht nur den Einstieg in TypeScript mit VS Code erleichtern, sondern auch den Umstieg auf Frameworks wie Angular einfacher machen. Verwenden kann man die Start Templates wie bisher (VS Code/TypeScript Start Template für Node.js und Web Applikationen), mit Hilfe dieses Artikels sollte es auch einfach sein, selbst ein Starttemplate für sich zu erzeugen. Noch immer habe ich kein richtiges Scaffolding Template erstellt und auch auf die Verwendung im Docker Container, das inzwischen Visual Studio Code so toll unterstützt, bin ich nicht eingegangen. Diese Themen sollen ein eigener Blog Artikel werden.

Ich hoffe, dass der Einblick in die Generierung der Templates und diese selbst (oder auch nur Teile von den Templates) dem einen oder anderen hilft.

3. Anhang

3.1 Aktuelle Versionen:

❯ node --version
v14.16.0
❯ npm --version
6.14.11
❯ code --version
1.54.1