· 3 min read

TypeScript - Start Template für Node.js und Web Applikation (Let's Code 20 + 21)

!ACHTUNG, veraltert! Neuere Template Version siehe: VS Code/TypeScript Start Template für Node.js und Web Applikationen

Die Überlegungen und grundsätzlichen Anmerkungen sind aber hilfreich und deshalb wurde der Artikel nicht entfernt.

Noch immer bin ich auf der Suche nach dem perfekten Start Template für Node.js Projekte bzw. Web Applikationen, die mit TypeScript in VS Code (Visual Studio Code) programmiert werden.

Ein Problem scheint nun gelöst zu sein, mit TypeScript 2.0 gibt es Type Deklarationen die mit npm geladen werden können (siehe TypeScript - npm @types).

Node.js Package Manager npm - überall

Damit wird dem Trend nachgegangen, alles mit npm abzudecken. Durch Scripts im npm Config File package.json, ersetzt man immer mehr auch Task runner, wie gulp und grunt.

Auch die Trennung der Libraries für die Entwicklungsumgebung und jene, die das entstehende Programm verwendet, ist nicht mehr durch die Verwendung eines eigenen Package Managers, wie Bower, üblich, sondern man verwendet für beide npm.

Für die Web Applikation verwenden viele SystemJS statt RequireJS, wie ich es in meinem letzten Template noch gezeigt habe.

SystemJS ist sehr ähnlich zu verwenden und hat den Vorteil, dass man dieselben Module (commonjs) für node.js und für Browser Applikationen verwenden kann.

Zukunft:

Facebook hat gerade einen Aufsatz auf npm vorgestellt, der die Packages lokal effizienter verwaltet.

Immer wichtiger werden auch Tools wie WebPack oder Rollout, welche die JavaScript Files paketieren. Diese Tools übernehmen auch Aufgaben von Modul Loadern. Mal sehen, wie sich das weiterentwickeln wird. Vielleicht ist SystemJS bald Geschichte.

Das Template

Während der Folgen 20 und 21:Let’s Code [020]: VS Code - TypeScript 2 - System.js meines YouTube Kanals: Helmbergers Let’s Code entstand folgendes Template, das einem hilft ein Projekt zu starten.

Den Sourcecode findet man auch auf GitHub: GitHub Repository template.typescript.2

Vom GitHub Template zum eigenen Projekt

Wie erzeugt man sich nun aus einem GitHub Source sein eigenes Projekt auf der lokalen Festplatte.

Ich mache das anhand folgender Beschreibung Angular QuickStart Source - Create a new project based on the QuickStart: In der PowerShell:

git clone  https://github.com/FranzHelm/template.typescript.2 my-proj
cd my-proj
rm -r -force .git

npm install
npm start

Damit sollte sich der Server, anschließend auch der Browser starten und das eigene Projekt kann darauf aufbauend weiterentwickelt werden. Strg + C beeendet den Server, mit code .startet man VS Code und kann beginnen, z.B. mal den Projektnamen ins package.json File einzutragen.

Anhang

A.1 VS Code Konfigurationsfiles

Meine Visual Studio Konfigurationsfiles (die sind ja nicht auf GitHub abgelegt)

  • .vscode/settings.json
{
    "files.exclude": {
        "**/*.js.map": true,
        "**/*.js": {
            "when": "$(basename).ts"
        },
        "node_modules": true
    }
}
  • .vscode/tasks.json
{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}
  • .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Artikel in diesem Blog


Weitere Let’s Code Artikel.

Back to Blog