Wie im letzten Artikel „TypeScript“ beschrieben, muss geschriebener Code in TypeScript erst mit einem Transcompiler in normalen Javascript Code umgewandelt werden, um diesen in einem Browser nutzen zu können.

Wenn man gerade eine App entwickelt und etwas testen möchte, wäre es sehr umständlich, immer z.B.: mit dem Befehl `tsc main.ts` die Datei manuell umzuwandeln. Darum richtet man sich am besten eine „Entwicklungsumgebung“ ein, die den geschriebenen TypeScript automatisch umwandelt und das Ergebnis sofort im lokalen Browser anzeigt.

Hierfür nutzt man am besten Webpack. Mit Webpack kann man das Umwandeln von TypeScript in Javascript automatisieren und auch gleichzeitig einen Webserver starten, der das Ergebnis anzeigt.

Webpack ist ein Opensource-JavaScript-Modul-Packer. Die wesentliche Aufgabe besteht darin, JavaScript-Dateien für die Nutzung im Browser zusammenzuführen und zu einer Datei zu bündeln;

Um Webpack nutzen zu können benötigt man Node.js mit dem Packetmanager NPM. Hat man Node.js installiert kann man über die Kommandozeile verschiedene Module in einem Ordner installieren und diese dann nutzen.

Inhalt

• Webpack installieren
• Beispiel: Minify Javascript Code
• Webserver zum Entwickeln installieren
• Links

Webpack installieren

Zuerst benötigt man Webpack und das Webpack CLI (Command Line Interface). Dazu geht man in den Projektordner und führt folgenden Befehl aus:

// installiert Webpack und Webpack CLI
npm install webpack webpack-cli --save-dev

Nach der Installation von Webpack wurde ein Ordner „node_modules“ und zwei „package“ Dateien angelegt. Die wichtigste Datei ist „package.json„. Diese Datei definiert welche Module, z.B.: Webpack, für dieses Projekt benötigt werden. In diesem Beispiel sieht man, wie zu erwarten, das Modul Webpack und Webpack CLI.

Webpack alleine verändert geschriebenen Javascript Code nur dahingehend, dass dieser automatisch verkleinert, minified, wird. Um TypeScript Code in normalen Javascript Code umzuwandeln benötigen wir später noch einen Transcompiler.

Beispiel: Minify Javascript Code

Dazu erstellt man zwei neue Ordner: „src“ und „dist“. Im „src“ Ordner werden die Dateien, die man während der Entwicklung nutzt gespeichert. Im „dist“ Ordner wird der durch Webpack veränderte Code als finales Produkt ausgegeben.

Um Webpack zu sagen, was es machen soll, benötigt man eine „webpack.config.js“ Datei mit folgendem Inhalt:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Hier können verschiedene Parameter gesetzt werden. In diesem Beispiel wird ein Einstiegs- und Ausgangspunkt festgelegt. Webpack sucht nach einer „index.js“ Datei, verkleinert diese und gibt als Ergebnis eine „main.js“ Datei aus.

Um diesen Befehl ausführen zu können erstellt man in „package.json“ ein Aufrufskript, welches dann mit „npm run build“ aufgerufen werden kann. Das Skript hat den Namen „build“ und führt den Befehl „webpack“ aus, der nach einer „webpack.config.js“ Datei sucht und den Inhalt ausführt:

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }
}

Als Beispiel erstellt man im „src“ Ordner eine neue „index.js“ Datei und fügt Javascript ein, z.B.:

//START

let meinName = "Richi";
let meineHobbys = ["Tennis", "Basketball", "Computer"];

meineHobbys.forEach(hobby => {
    console.log(hobby);
})

//ENDE

Wenn man diesen Code nun mit Webpack bauen lässt, wird im „dist“ Ordner eine neue Datei „main.js“ erstellt, mit folgendem Inhalt:

["Tennis","Basketball","Computer"].forEach((o=>{console.log(o)}));

Man kann sehen, dass alles Unnötige durch Webpack entfernt wurde.

Webserver zum Entwickeln installieren

Im Ordner des aktuellen Projekts kann man mit folgendem Befehl einen Webserver für die lokale Entwicklung installieren.

// installiert den Webpack dev Server
npm install --save-dev webpack-dev-server

Nach der Installation des Dev Server Moduls erweitert man die „webpack.config.js“ Datei, damit der Server weiß, wo die Dateien liegen, die er anzeigen soll. Des Weiteren fügt man den Modus „development“ ein, damit Wepback weiß, dass man gerade das Projekt entwickelt. Dadurch werden einige Abläufe vereinfacht und schneller ausgeführt.

const path = require('path');

module.exports = {
    mode: 'development', // oder production
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: './dist', //Hier sucht der Webserver nach Dateien
    },
};

In „package.json“ erstellt man ein zweites Run Skript, welches den Server startet:

{
  "scripts": {
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "devDependencies": {
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Mit dem Befehl „npm run start“ wird nun ein Webserver gestartet der die Dateien im Ordner „dist“ anzeigt:

Dieser Webserver aktualisiert sich automatisch, wenn man eine Datei ändert. Ändert man in „index.js“ die Ausgabe von „Hallo Welt“ zu „Super Welt“ und speichert die Datei, wird diese automatisch aktualisiert im Webserver angezeigt.

typescript und ts-loader installieren

dd

Links

• Webpack: Getting Started
• Webpack: Development