In dieser Artikelserie werden wir den gesamten Zyklus des Erstellens des Client-Teils der Anwendung durchlaufen und eine kleine Bibliothek von Komponenten unter Verwendung des modernen Technologie-Stacks schreiben.
Ich schreibe diesen Artikel für Anfänger von Frontend-Entwicklern, die ihr erstes JavaScript-Projekt erstellen und der Welt zeigen möchten. Für diese Artikelserie habe ich den grundlegenden Stapel ausgewählt, der in den meisten modernen Projekten zu finden ist. Um sich nicht zu langweilen, können Sie immer etwas Eigenes hinzufügen. Ich empfehle daher, dass Sie Ihre eigene Implementierung schreiben und die Ergebnisse der Arbeit an GitHub veröffentlichen, während Sie den Artikel lesen. Sicherlich haben Sie ein Dutzend Technologien, Bibliotheken, Frameworks, Tools, die Sie ausprobieren möchten, und die Entwicklung eines solchen Haustierprojekts ist eine großartige Option, um etwas Neues auszuprobieren.
Bekanntschaft mit dem Projekt
Die Hauptidee des Projekts, das wir implementieren werden, besteht darin, eine React-Komponentenbibliothek mit TypeScript zu schreiben, sie mit dem Storybook zu dokumentieren und zu visualisieren und sie als Paket in npm zu veröffentlichen. Wir werden auch Linters konfigurieren, Tests für Jest hinzufügen und den Testprozess mit Travis CI automatisieren. Vielleicht wird während der Arbeit noch etwas hinzugefügt, zögern Sie nicht, Ihre Lösungen zu kommentieren und vorzuschlagen.
Der Artikel wird in mehrere Teile unterteilt, damit wir jede Phase des Projekts im Detail untersuchen können.
Erste Schritte
Um zu beginnen, müssen wir ein Repository auf GitHub für unser Projekt erstellen:
So sieht das Fenster zum Erstellen meines neuen Repository aus. Sie müssen einen Namen und eine kurze Beschreibung Ihres Repositorys erstellen. Für alle meine Lieblingsprojekte wähle ich immer den öffentlichen Repository-Typ. Jetzt bietet GitHub die Möglichkeit, kostenlos ein privates Repository zu erstellen, wenn Ihr Team nicht mehr als drei Personen umfasst. Ich habe auch sofort eine MIT-Lizenz hinzugefügt - dies ist die einfachste und gebräuchlichste Version der Lizenz für Open Source-Projekte. Wenn Sie mehr über Lizenzen erfahren möchten, können Sie
diese von GitHub erstellte
Site sehen .
Klonen Sie nun das neue Repository. GitHub empfiehlt das Klonen mit SSH oder HTTPS. Ich benutze normalerweise die zweite Methode.
git clone https://github.com/Alexandrshy/react-ant.git
Wenn Meldungen zum erfolgreichen Entpacken angezeigt werden, war das Klonen erfolgreich.
Wir müssen das Passwort auch sofort zwischenspeichern. Wenn Sie dies nicht tun, wenn Sie das nächste Mal versuchen, git push, git fetch, git clone auszuführen, müssen Sie einen Benutzernamen und ein Passwort eingeben (
mehr dazu ).
git config --global credential.helper osxkeychain
Fahren wir mit der Erstellung der Datei package.json fort. Führen Sie dazu den folgenden Befehl aus:
npm init -y
Nachdem Sie den Befehl im Repository ausgeführt haben, können Sie die Datei package.json mit einigen ausgefüllten Feldern anzeigen. Meine sieht folgendermaßen aus:
{ "name": "react-ant", "version": "1.0.0", "description": "A set of light React components ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/Alexandrshy/react-ant.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/Alexandrshy/react-ant/issues" }, "homepage": "https://github.com/Alexandrshy/react-ant#readme" }
Wir werden sofort kleine Änderungen vornehmen:
"keywords": [ "react", "css", "UI" ], "author": { "name": "Alex", "email": "alexandrshy@gmail.com", "url": "https://github.com/Alexandrshy" }, "license": "MIT",
Ich denke, hier ist alles klar, aber für eine detailliertere Konfiguration benötigen Sie möglicherweise
diese Dokumentation .
Während wir am Projekt arbeiten, kehren wir zur package.json-Konfiguration zurück. Aber jetzt ist es Zeit, das erste Commit zu machen.
git status git add package.json git commit -m "Init npm package" git push
Kurz gesagt: Wir haben den Änderungsverlauf überprüft, das geänderte package.json indiziert, mit einer einfachen und eindeutigen Festschreibungsmeldung festgeschrieben und dann unsere Änderungen in einem Remote-Repository abgelegt. Jetzt sind package.json und Informationen zum neuen Commit in unserem Repository erschienen. Sie können die IDE oder GUI verwenden, um mit Git zu arbeiten, aber ich fühle mich wohler, wenn ich alles in der Konsole mache.
Linter
Um Ihren Code sauberer zu halten (dies ist besonders wichtig, wenn mehrere Personen an dem Projekt arbeiten), benötigen Sie auf jeden Fall ein Tool zum Analysieren und Identifizieren von Fehlern. In meinen Projekten verwende ich ESLint, um JavaScript-Code zu testen. Es ist einfach zu installieren und in hohem Maße anpassbar.
Installieren Sie ESLint:
npm i -D eslint
Richten Sie die Konfigurationsdatei ein:
./node_modules/.bin/eslint --init
Sie können ESLint manuell konfigurieren oder einen vordefinierten Regelsatz verwenden. Ich mag den Guide von
Airbnb . Ich habe folgende Einstellungen vorgenommen:
? How would you like to use ESLint? To check syntax, find problems, and enforce code style ? What type of modules does your project use? JavaScript modules (import/export) ? Which framework does your project use? React ? Does your project use TypeScript? Yes ? Where does your code run? Browser ? How would you like to define a style for your project? Use a popular style guide ? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript) ? What format do you want your config file to be in? JavaScript
Da wir TypeScript verwenden möchten, habe ich dieses Element sofort im Dialogfeld ausgewählt. Dabei ist der Fehler
"typescript" des Moduls nicht zu finden. Dies ist logisch, da wir TypeScript noch nicht installiert haben.
npm i typescript npm i -D @typescript-eslint/parser
Nach der Installation sehen Sie die Konfigurationsdatei von eslintrc. Es ist bereits konfiguriert, aber wenn Sie während der Entwicklung einige Regeln hinzufügen oder ändern möchten, hilft es Ihnen.
Um ESLint zu testen, erstellen wir eine index.ts-Datei und speichern dort den folgenden Code:
var a console .log('a = ' + a) a = 100
Und führen Sie den Check durch:
./node_modules/.bin/eslint index.ts
Großartig, ein 5-zeiliger Code hat 7 Fehler und 1 Warnung. Und sofort bietet mir ESLint an, diese Fehler automatisch zu beheben. Versuchen wir Folgendes:
./node_modules/.bin/eslint index.ts --fix
Und wir erhalten diesen Code ohne Fehler und mit einer Warnung zur Verwendung von console.log:
var a; console .log(`a = ${a}`); a = 100;
Wie Sie sehen können, funktioniert die automatische Korrektur, die Fehler wurden behoben, aber der Code sieht immer noch ziemlich hässlich aus. Für die Formatierung von Code ist meiner Meinung nach das beste Tool
schöner . Fügen wir es unserem Projekt hinzu:
npm i -D prettier-eslint npm i -D prettier-eslint-cli
"scripts": { "format": "prettier-eslint '**/*.{js,ts,tsx}' --write" },
Ich habe die Option --write hinzugefügt, damit alle formatierten Dateien überschrieben werden. Überprüfen Sie das Ergebnis:
npm run format
index.ts
let a; console.log(`a = ${a}`); a = 100;
Alles funktioniert super. Sie können auch Plugins für Ihre IDE installieren, um Dateien mithilfe von Tastenkombinationen oder beim Speichern von Änderungen zu formatieren. Fügen wir nun die Skripte zu package.json hinzu:
"scripts": { "eslint": "./node_modules/.bin/eslint '**/*.{js,ts,tsx}'", "eslint:fix": "npm run eslint -- --fix", "format": "prettier-eslint '**/*.{js,ts,tsx}' --write" },
Die ideale Option beim Starten eines neuen Projekts ist die sofortige Konfiguration aller Linters. Wenn Sie nämlich versuchen, sie in ein vorhandenes Projekt zu implementieren, wird eine große Anzahl von Fehlern angezeigt, und die Fehlerbehebung dauert viel länger, als wenn Sie sich ursprünglich um die Qualität Ihres Codes gekümmert hätten.
Änderungen speichern:
git add . git commit -m "Added ESLint and Prettier" git push
Haken vorab festschreiben
Wir haben ESLint und Prettier konfiguriert und Skripts für die manuelle Ausführung erstellt. Es wäre jedoch hilfreich, dies vor dem Festschreiben automatisch zu tun. Dafür können wir Git-Hooks verwenden. Mit dem
Husky- Paket können Sie Skripte ausführen, bevor Sie "git commit" ausführen, und mit dem
Lint-Staged- Paket können Sie nur indizierte Dateien mit bestimmten Filtern vergleichen.
npm i -D husky lint-staged
Kehren wir zu package.json zurück und fügen den folgenden Code hinzu:
"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx|ts|tsx)": [ "npm run eslint:fix", "npm run format", "git add" ] },
Jetzt führen wir vor jedem Commit eine ESLint- und Prettier-Prüfung für alle geänderten js- und ts-Dateien durch und fügen diese Dateien nach der Formatierung zu unserem Commit hinzu.
Lassen Sie uns die Datei index.ts erneut testen:
var a; console .log(`a = ${a}`); a = 100;
Nur bei diesem indizieren wir diese Datei sofort und schreiben fest:
git add index.ts git commit -m "Testing pre-commit hook"
Wenn Sie jetzt die Datei index.ts überprüfen, werden Sie feststellen, dass der Code formatiert wurde. Vor dem Speichern der Änderungen wird die Datei überprüft und gegebenenfalls formatiert. Auf diese Weise können Sie sicher sein, dass die Dateien in Ihrem Repository korrekt sind.
Fazit
Wir müssen alle Änderungen speichern. Erstellen Sie zuvor eine
.gitignore- Datei, in der wir
node_modules schreiben.
Sie benötigen den Abhängigkeitsordner nicht, um in unser Repository zu gelangen. Wir können auch die Datei index.ts löschen, wir werden sie in Zukunft nicht mehr brauchen.
git add . git commit -m "Added husky and lint-staged" git push
Sie können das gesamte Ergebnis der Arbeit im
Repository sehen . Der aktuelle Status des Projekts ist der Hauptzweig, und für jeden Artikel werde ich einen eigenen Zweig erstellen.
Wir werden hier aufhören, ich danke Ihnen allen für Ihre Aufmerksamkeit, wir sehen uns in den folgenden Teilen.
Referenzen
npm DokumentationESLint offizielle WebsiteSchöner-eslintSchöner-eslint-cliSchönere Erweiterung für VSCodeHuskyFusselfrei inszeniert