Geekly articles weekly

Strenge Regeln für eine neue Angular-App

So erstellen und konfigurieren Sie ein Angular-Projekt von Grund auf


Kurze Einführung


Sehr oft stoße ich zu Beginn der Entwicklung auf eine Situation, in der das Projekt nicht streng genug konfiguriert ist, und dies ist ein großer Fehler, da das Ändern der Einstellungen der Linters oder das Hinzufügen zusätzlicher Optionen zum Überprüfen der Art der Skripte in der Zukunft eine echte Belastung für das gesamte Team sein kann. Machen Sie daher diesen häufigen Fehler nicht und konfigurieren Sie Ihr Projekt von Anfang an so genau wie möglich.


Entwicklungsumgebung vorbereiten


Git


Das erste, was in einer Entwicklungsumgebung installiert werden muss, ist Git . Laden Sie Git herunter und installieren Sie es auf Ihrem Betriebssystem.


Danach müssen Sie persönliche Daten einrichten. Diese Informationen sind in jedem Commit enthalten, und dann kann jedes Teammitglied den Autor einer beliebigen Codezeile im Projekt finden.


//    (  )   $ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com //            $ git config user.name "John Doe" $ git config user.email johndoe@example.com

NodeJs und NVM


Das nächste, was Sie konfigurieren müssen, um mit Angular zu arbeiten, sind NodeJs . Der bisher beste Ansatz ist die Installation von NodeJs mithilfe von Node Version Manager . Auf diese Weise können Sie problemlos zu einer beliebigen Version wechseln und dies sogar automatisch für jedes Projekt tun.


  1. Auf MacOs müssen Sie vor der Installation eine .zshrc- Datei in Ihrem Ausgangsverzeichnis erstellen.

 $ touch ~/.zshrc

  1. Führen Sie einen der folgenden Befehle aus, um NVM zu installieren oder zu aktualisieren. Die Version im Team kann aktualisiert werden. Überprüfen Sie die neueste Version hier .

 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash $ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

  1. Installieren Sie die neueste LTS- Version von NodeJs .

 $ nvm install 'lts/*'

  1. Stellen Sie es als Standard ein .

 $ nvm use 'lts/*' $ nvm alias default 'lts/*'

  1. Fügen Sie unter MacOs den folgenden Code zur Datei ~ / .zshrc hinzu , damit nvm use automatisch aufgerufen wird, wenn Sie zu dem Verzeichnis wechseln , das die .nvmrc- Datei enthält, und in der Zeile nvm angeben, welche Version von nodejs verwendet werden soll. Für andere Betriebssysteme lesen Sie das Handbuch.

 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")") if [ "$nvmrc_node_version" = "N/A" ]; then nvm install elif [ "$nvmrc_node_version" != "$node_version" ]; then nvm use fi elif [ "$node_version" != "$(nvm version default)" ]; then echo "Reverting to nvm default version" nvm use default fi } add-zsh-hook chpwd load-nvmrc load-nvmrc

CLI-Installation und Projekterstellung


  1. Installieren Sie die CLI mit dem npm-Paketmanager.

 $ npm install -g @angular/cli

  1. Wechseln Sie zu Ihrem Projektordner und erstellen Sie ein leeres Angular-Projekt

 $ cd ~/Projects $ ng new --create-application false --new-project-root apps project-name

Wir haben ein leeres Projekt mit einem benutzerdefinierten Anwendungsverzeichnis für neue Anwendungen erstellt. Mit anderen Worten, wir haben die Basis für das Monorepository vorbereitet .


  1. Erstellen und übergeben Sie die erste Anwendung im Mono-Repository .

 $ cd project-name $ ng generate application --routing true --style scss website $ git add . $ git commit -m 'website application created'

Um weitere Anwendungen zu erstellen, wiederholen Sie diesen Schritt einfach mit einem anderen Anwendungsnamen anstelle der Website .


Bibliothekserstellung


Normalerweise empfehle ich, Bibliotheken im Ordner libs zu erstellen. Dazu müssen wir eine Zeile in der angle.json- Datei ändern :


 "newProjectRoot": "apps",

In der folgenden Zeile:


 "newProjectRoot": "libs",

Und führen Sie den Befehl aus:


 $ ng generate library @group-name/lib-name

Wir haben den Gruppennamen hinzugefügt, um die Bibliotheken klarer nach Domain oder einem anderen Prinzip zu gruppieren. Wenn Sie eine Bibliothek beispielsweise in npm veröffentlichen möchten, müssen Sie hier zunächst eine Organisation mit dem Namen erstellen, der dem Gruppennamen entspricht. Dies ist wie ein Namespace für eine Gruppe verwandter Bibliotheken, zum Beispiel:


 "@angular/common" "@angular/compiler" "@angular/core" "@angular/forms"

Ich werde den Prozess der Veröffentlichung von Bibliotheken in npm in zukünftigen Artikeln detaillierter beschreiben. Befolgen Sie in der Zwischenzeit einfach diese Regel.


Und vergessen Sie nicht, angle.json auf den vorherigen Status zurückzusetzen: "newProjectRoot": "apps"


Zusätzliche Konfiguration


NodeJs Version


Fügen Sie eine .nvmrc- Datei mit dem Text lts/* . Sie können auch eine bestimmte Version des Knotens angeben, z. B. 12.13.1 . Diese Version wird automatisch installiert, wenn Sie meine vorherigen Anweisungen befolgt haben. Sie können diese Version auch manuell mit dem $ nvm use aktivieren.


 $ touch .nvmrc $ echo "lts/*" > .nvmrc

Strikte Überprüfung auf Null und undefiniert


Fügen Sie der tsconfig.json die folgende Regel tsconfig.json , um eine strikte Überprüfung auf null und undefiniert zu ermöglichen. Dies schützt Sie vor dem häufigen Fehler beim Lesen einer Eigenschaft einer undefinierten Variablen oder einer Nullvariablen.


 "compilerOptions": { "strictNullChecks": true, }

Oder besser , wenn Sie strengere Prüfungen wünschen, fügen Sie alle Regeln in den Compiler ein:


 /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ "noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedParameters": true, /* Report errors on unused parameters. */ "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */

Damit TypeScript nicht nur in TS-Dateien, sondern auch in Angular-Vorlagen strenger ist, müssen Sie die Option 'fullTemplateTypeCheck' in tsconfig.json aktivieren:


 { "compilerOptions": { ... }, "angularCompilerOptions": { "fullTemplateTypeCheck": true ... } }

Versuchen Sie nach dem Hinzufügen dieser Regeln, ein Projekt zu erstellen und alle gefundenen Fehler zu beheben.


 $ npm run build

Strenge TsLint-Regeln


Aktivieren Sie alle tslint-Regeln mit den strengsten Einstellungen. Ersetzen Sie dies einfach in tslint.json


 "extends": "tslint:recommended",

Auf


 "extends": "tslint:all",

Fügen Sie die folgenden Regeln hinzu, um einige zusätzliche Regeln zu deaktivieren


 "no-implicit-dependencies": false, "no-submodule-imports": false, "completed-docs": false, "prefer-function-over-method": false, "file-name-casing": [ true, "kebab-case" ], "no-object-literal-type-assertion": [ true, { "allow-arguments": true } ], "no-floating-promises": false, "promise-function-async": false, "no-unsafe-any": false, "no-any": false, "comment-format": [ true, "check-space" ], "newline-per-chained-call": false, "typedef": [ true, "call-signature", "arrow-call-signature", "parameter", "arrow-parameter", "property-declaration", "object-destructuring", "array-destructuring" ]

Deaktivieren oder konfigurieren Sie während des Entwicklungsprozesses die Regeln, die Ihnen nicht gefallen. Und vergessen Sie nicht , die tslint-Unterstützung in Ihre IDE aufzunehmen .


Versuchen Sie nach dem Hinzufügen dieser Regeln, das Projekt mit einem Linter auszuführen und alle Fehler zu beheben.


 $ npm run lint

Lint SCSS mit Stylelint


Fügen Sie Stylelint hinzu , um die Qualität Ihres sssss-Codes zu überprüfen


 $ npm install stylelint stylelint-config-standard --save-dev $ touch .stylelintrc

Und konfigurieren Sie die Regeln in .stylelintrc


 { "extends": "stylelint-config-standard", "rules": {} }

Fügen Sie die folgenden Zeilen hinzu, um stylelint in package.json auszuführen


 "scripts": { "lint-all-scss": "stylelint \"**/*.scss\"", "lint-all-scss-fix": "npm run lint-all-scss -- --fix" }

Deaktivieren oder konfigurieren Sie während des Entwicklungsprozesses die Regeln, die nicht zu Ihnen passen. Und vergessen Sie nicht , die Stylelint-Unterstützung in Ihre IDE aufzunehmen


 $ npm run lint-all-scss-fix

Schöner


Hübscher wird zum Formatieren von Code verwendet. Für einige Codezeilen gibt Prettier nicht das gewünschte Ergebnis an, aber trotz der Vorteile, die sich aus der Verwendung ergeben, gibt es noch viel mehr.


 $ npm install --save-dev --save-exact prettier

Fügen Sie die Konfigurationsdatei .prettierrc zum Projekt hinzu


 { "printWidth": 120, "tabWidth": 2, "arrowParens": "always", "bracketSpacing": true, "endOfLine": "lf", "semi": true, "singleQuote": true, "quoteProps": "consistent", "trailingComma": "all" }

Und eine .prettierignore- Datei mit ignorierten Dateien und Ordnern


 karma.conf.js protractor.conf.js ng-package.json package.json tsconfig.lib.json tsconfig.app.json tsconfig.spec.json tslint.json tsconfig.json browserslist .gitkeep favicon.ico

Fügen Sie in package.json Skripte zum Ausführen von hübscher hinzu


 "scripts": { "prettier": "prettier --write \"{apps,libs}/**/*\"", "prettier:check": "prettier --check \"{apps,libs}/**/*\"" },

Führen Sie danach hübscher aus, um alle Dateien im Projekt zu reparieren


 $ npm run prettier

HAKEN


Um Linter, Formatierer oder andere Skripte auszuführen, können wir Git-Hooks konfigurieren. Wir werden dafür folgende Pakete verwenden:


  • Husky - Setzt Haken
  • ziemlich schnell - Startet schöner nur für geänderte Dateien

 $ npm i husky pretty-quick -D

Der nächste Schritt ist das Schreiben von Skripten für unsere Hooks. Ich ziehe es vor, einen Tools- Ordner für Shell-Skripte zu erstellen. Wir werden 3 Hooks konfigurieren:


  1. Pre-Commit - Ein Hook, der vor dem Commit ausgeführt wird. In dieser Haube werden wir auf die geänderten Dateien schöner.
  2. commit-msg - Ein Hook, in dem Sie den Festschreibungstext ändern können. Wir verwenden ihn, um dem Festschreibungstext einen Zweignamen hinzuzufügen.
  3. pre-push - Ein Hook, der vor dem Git-Push ausgeführt wird. Wir benutzen es, um Linter zu starten.

Husky-Konfiguration in package.json :


 "husky": { "hooks": { "pre-commit": "pretty-quick --staged", "commit-msg": "node ./tools/commit-msg.js", "pre-push": "./tools/pre-push.sh" } },

Skript ./tools/commit-msg.js


 const fs = require('fs'); const { execSync } = require('child_process'); const message = fs.readFileSync(process.env.HUSKY_GIT_PARAMS, 'utf8').trim(); const currentBranch = getCurrentBranch(); fs.writeFileSync(process.env.HUSKY_GIT_PARAMS, `${currentBranch}: ${message}`); process.exit(0); function getCurrentBranch() { const branches = execSync('git branch', { encoding: 'utf8' }); return branches .split('\n') .find((b) => b.charAt(0) === '*') .trim() .substring(2); }

Skript ./tools/pre-push.sh


 #!/usr/bin/env bash npm run lint-all-scss || exit npm run lint || exit

Sie können auch einen Testlauf und e2e zu einem Pre-Push-Skript hinzufügen.


BALD KOMMEN ...


Dieser Artikel ist der erste in einer Reihe zum Einrichten eines Angular-Projekts. In den folgenden Artikeln möchte ich folgende Themen behandeln:


  • Kontinuierliche Integration mit Travis und Docker konfigurieren
  • Serverseitiges Rendering
  • Übersetzungen
  • Tests
  • Management des Zustands und der Struktur von Modulen
  • Mono-Repository mit Nrwl.Nx

Abonnieren, Fragen stellen. Sie können auch das in diesem Artikel beschriebene Beispiel in diesem Repository sehen .



Treten Sie auch unserer Community auf Medium , Telegram oder Twitter bei .

Source: https://habr.com/ru/post/de481444/

More articles:


All Articles