Читать книгу Angular - Ferdinand Malcher - Страница 111

Konfiguration für NPM NPM-Skripte

In der Datei package.json befindet sich die Konfiguration für den Node Package Manager (NPM). Sie enthält Angaben zum Projektnamen, zur Version, zur Lizenz, unter der das Projekt stehen soll, sowie Angaben zu abhängigen Paketen. Die Angaben in scripts sorgen für die Ausführung bestimmter Befehle zum Starten der Anwendung oder zugehöriger Tests. Einen Anwendungsfall dafür sehen wir später im Kapitel zur Internationalisierung ab Seite 474.

Abhängigkeiten

Weiterhin gibt es die zwei wesentlichen Abschnitte dependencies und devDependencies. In dependencies werden alle abhängigen Module mit den entsprechend installierten Versionen gelistet, die mittels NPM installiert wurden und direkt von der Anwendung verwendet werden. In devDependencies hingegen erscheinen die Pakete, die für die Entwicklung des Projekts benötigt werden. Dies sind zum Beispiel Test-Runner und deren Erweiterungen, Transpiler und natürlich auch die Angular CLI.

tsconfig.json

IDE-Unterstützung

Diese Datei bildet den mit TypeScript 3.9 eingeführten Solution Style ab.⁴ Dieses Format sorgt dafür, dass IDEs und Build-Tools die Typ- und Package-Konfigurationen besser lokalisieren und auflösen können. In der Datei tsconfig.json werden daher nur weitere TypeScript-Konfigurationen referenziert.

Nutzen Sie Angular 9.x oder früher, so enthält die Datei den Inhalt der im Folgenden erläuterten Datei tsconfig.base.json, die erst mit Angular 10.0 eingeführt wurde.

Zu den TypeScript-Konfigurationsdateien gibt es fortlaufende Vorschläge und Diskussionen. Bitte beachten Sie, dass sich der Inhalt und die Dateinamen mit späteren Versionen von Angular noch ändern können. In diesem Fall wird es wie üblich eine automatische Migration geben.

tsconfig.base.json

Basiskonfiguration für den TypeScript-Compiler

Diese Basiskonfigurationsdatei existiert zur Vermeidung von doppelten und gleichen Einstellungen in den Dateien tsconfig.*.json. In dieser Datei sind Optionen angegeben, die vom TypeScript-Compiler gelesen und verarbeitet werden. Hier werden z. B. Angaben zum vorliegenden Modulformat sowie zum Zielformat gemacht, das nach dem Kompilierungsvorgang ausgegeben werden soll. Eine detaillierte Auflistung der Compiler-Optionen ist auf der TypeScript-Website zu finden.⁵ Normalerweise müssen wir an der Konfiguration allerdings nichts verändern.

tsconfig.app.json und tsconfig.spec.json

Spezifische TypeScript-Konfiguration

Diese beiden Dateien erweitern die angelegte Datei tsconfig.base.json. Die Datei tsconfig.app.json konfiguriert den Kompiliervorgang der Hauptanwendung. In der Datei tsconfig.spec.json wird spezifiziert, wie die Unit-Tests kompiliert werden sollen (siehe Kapitel zum Testing ab Seite 483). Analog dazu wird die Datei e2e/tsconfig.json beim Kompilieren der Oberflächentests ausgewertet (siehe Seite 526). In all diesen Dateien werden z. B. Angaben zum vorliegenden Modulformat sowie zum Zielformat gemacht, das nach dem Kompilierungsvorgang ausgegeben werden soll.

tslint.json

TSLint prüft den Code nach festgelegten Regeln.

Die Datei tslint.json beinhaltet eine Konfiguration für das Tool TS-Lint.⁶ Mit diesem Tool und der zugehörigen Konfigurationsdatei können wir dafür sorgen, dass in unserem Projekt stets ein einheitlicher Codestil eingehalten wird. Das Tool prüft den Code anhand der Konfiguration und warnt uns, sobald wir gegen eine festgelegte Regel verstoßen. Die in dieser Datei angegebenen Konventionen entsprechen gleichzeitig den festgelegten Regeln des Angular-Styleguides und sollten nicht verändert werden.⁷

TSLint ausführen

Um den von uns geschriebenen Quelltext gegenüber dem Styleguide und damit auch gegenüber den festgelegten Regeln der tslint.json zu prüfen, rufen wir den folgenden Befehl auf:

$ ng lint

Die Angular CLI ruft damit für uns tslint auf und prüft unseren Code gegen die Regeln. Sehen wir uns den Inhalt der Datei tslint.json an, entdecken wir die folgenden Regeln:

"directive-selector": [

true,

"attribute",

"bm",

"camelCase"

],

"component-selector": [

true,

"element",

"bm",

"kebab-case"

]

Namenskonventionen

Damit wird TSLint mitgeteilt, wie Komponenten und Direktiven benannt werden sollen: Hier findet sich die Konvention für die Schreibweise (camelCase, kebab-case), und das von uns zuvor definierte Präfix bm taucht wieder auf. TSLint prüft beim Aufruf, ob das Präfix bm für Komponenten und Direktiven gesetzt wurde, und gibt uns einen entsprechenden Fehler aus, sofern wir uns nicht an die Regel gehalten haben.

Einstellungen anpassen

Sie können die Einstellungen in der Datei tslint.json auch anpassen, wenn Sie abweichende Coderichtlinien in Ihrem Projekt verwenden. So ist es zum Beispiel möglich, die Standardeinstellung von Single Quotes auf Double Quotes umzustellen. Sie sollten allerdings die originalen Einstellungen beibehalten, weil sie bereits dem Styleguide von Angular entsprechen.