TypeScript meistern
Bitte unterstützen Sie dieses Buch: kaufen Sie es oder spenden Sie
(Werbung, bitte nicht blockieren.)

9 Web-Apps erstellen über TypeScript und webpack

Dieses Kapitel beschreibt, wie man Web-Apps über TypeScript und webpack erstellt. Wir verwenden nur die DOM-API, kein bestimmtes Frontend-Framework.

  GitHub Repository: ts-demo-webpack

Das Repository ts-demo-webpack, mit dem wir in diesem Kapitel arbeiten, kann von GitHub heruntergeladen werden.

9.1 Erforderliches Wissen

Sie sollten ungefähr vertraut sein mit

9.2 Einschränkungen

In diesem Kapitel bleiben wir bei dem, was von TypeScript am besten unterstützt wird: CommonJS-Module, gebündelt als Skriptdateien.

9.3 Das Repository ts-demo-webpack

So ist das Repository ts-demo-webpack strukturiert

ts-demo-webpack/
  build/   (created on demand)
  html/
    index.html
  package.json
  ts/
    src/
      main.ts
  tsconfig.json
  webpack.config.js

Die Web-App wird wie folgt gebaut

Beide Ausgabetasks werden von webpack gehandhabt

9.4 package.json

package.json enthält Metadaten für das Projekt

{
  "private": true,
  "scripts": {
    "tsc": "tsc",
    "tscw": "tsc --watch",
    "wp": "webpack",
    "wpw": "webpack --watch",
    "serve": "http-server build"
  },
  "dependencies": {
    "@types/lodash": "···",
    "copy-webpack-plugin": "···",
    "http-server": "···",
    "lodash": "···",
    "ts-loader": "···",
    "typescript": "···",
    "webpack": "···",
    "webpack-cli": "···"
  }
}

Die Eigenschaften funktionieren wie folgt

9.5 webpack.config.js

So konfigurieren wir webpack

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  ···
  entry: {
    main: "./ts/src/main.ts",
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: "[name]-bundle.js",
  },
  resolve: {
    // Add ".ts" and ".tsx" as resolvable extensions.
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: './html',
      }
    ]),
  ],
};

Eigenschaften

Weitere Informationen zur Konfiguration von webpack finden Sie auf der webpack-Website.

9.6 tsconfig.json

Diese Datei konfiguriert den TypeScript-Compiler

{
  "compilerOptions": {
    "rootDir": "ts",
    "outDir": "dist",
    "target": "es2019",
    "lib": [
      "es2019",
      "dom"
    ],
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true
  }
}

Die Option outDir wird nicht benötigt, wenn wir webpack mit ts-loader verwenden. Wir benötigen sie jedoch, wenn wir webpack ohne Loader verwenden (wie später in diesem Kapitel erklärt).

9.7 index.html

Dies ist die HTML-Seite der Web-App

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ts-demo-webpack</title>
</head>
<body>
  <div id="output"></div>
  <script src="main-bundle.js"></script>
</body>
</html>

Das <div> mit der ID "output" ist der Ort, an dem die Web-App ihre Ausgabe anzeigt. main-bundle.js enthält den gebündelten Code.

9.8 main.ts

Dies ist der TypeScript-Code der Web-App

import template from 'lodash/template';

const outputElement = document.getElementById('output');
if (outputElement) {
  const compiled = template(`
    <h1><%- heading %></h1>
    Current date and time: <%- dateTimeString %>
  `.trim());
  outputElement.innerHTML = compiled({
    heading: 'ts-demo-webpack',
    dateTimeString: new Date().toISOString(),
  });
}

9.9 Web-App installieren, bauen und ausführen

Zuerst müssen wir alle npm-Pakete installieren, von denen unsere Web-App abhängt

npm install

Dann müssen wir webpack (das im vorherigen Schritt installiert wurde) über ein Skript in package.json ausführen

npm run wpw

Von nun an überwacht webpack die Dateien im Repository auf Änderungen und baut die Web-App neu, wann immer es Änderungen erkennt.

In einer anderen Kommandozeile können wir nun einen Webserver starten, der den Inhalt von build/ auf localhost bereitstellt

npm run serve

Wenn wir die vom Webserver ausgegebene URL aufrufen, können wir die Web-App in Aktion sehen.

Beachten Sie, dass einfaches Neuladen möglicherweise nicht ausreicht, um die Ergebnisse nach Änderungen anzuzeigen – aufgrund von Caching. Möglicherweise müssen Sie einen erzwungenen Reload durchführen, indem Sie beim Neuladen die Umschalttaste drücken.

9.9.1 Bauen in Visual Studio Code

Anstatt über eine Kommandozeile zu bauen, können wir dies auch innerhalb von Visual Studio Code tun, über eine sogenannte Build Task

Wir können webpack nun über „Run Build Task…“ aus dem Menü „Terminal“ starten.

9.10 webpack ohne Loader verwenden: webpack-no-loader.config.js

Anstatt ts-loader zu verwenden, können wir auch zuerst unsere TypeScript-Dateien in JavaScript-Dateien kompilieren und diese dann über webpack bündeln. Wie der erste dieser beiden Schritte funktioniert, wird im vorherigen Kapitel beschrieben.

Wir müssen ts-loader nun nicht mehr konfigurieren und unsere webpack-Konfigurationsdatei ist einfacher

const path = require('path');

module.exports = {
  entry: {
    main: "./dist/src/main.js",
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name]-bundle.js',
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: './html',
      }
    ]),
  ],
};

Beachten Sie, dass entry.main anders ist. In der anderen Konfigurationsdatei lautet es

"./ts/src/main.ts"

Warum sollten wir Zwischenprodukte produzieren, bevor wir sie bündeln? Ein Vorteil ist, dass wir Node.js verwenden können, um Unit-Tests für einige der TypeScript-Codes auszuführen.

Kommentare
Weiter: 10 Strategien zur Migration zu TypeScript