Erstellen Sie die neueste Technologiebibliothek

Hallo Habr. In diesem Artikel geht es darum, wie man Hello World mit der neuesten Technologie schreibt.

Am Ende bekommen wir eine Hallo Weltbibliothek, die:

• Verwendet Typoskript
• Kümmert sich um Codestyle
• Erzeugt ein Dock
• Führt Tests durch

Start gestartet

Initiieren Sie im neuen Ordner git und npm

git init npm init 

Beim Einrichten von npm

  package name: (bestlibever) version: (1.0.0) 0.1.0 description: Best lib forever entry point: (index.js) test command: jest git repository: keywords: author: >MAX_ (maximmasterr) license: (ISC) MIT 

Projektstruktur

Das Projekt wird die folgenden Verzeichnisse haben:

• src - Hier sind die Dateien der Bibliothek selbst (Typoskript)
• lib - Hier legt tsc die kompilierten Dateien von src ab
• Test - Hier sind die Tests
• Beispiele - Verwendungsbeispiele

Sie müssen auch zu .gitignore hinzufügen:

 lib/ node_modules/ 

Typoskript

Installieren und konfigurieren Sie nun Typoskript:

 npm i typescript -D 

Und erstellen Sie eine Datei mit dem Namen tsconifg.json

  { "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./lib", "strict": true, "sourceMap": true }, "include": ["src"], "exclude": ["node_modules", "**/__tests__/*"] } 

Lassen Sie uns nun die Hauptdatei src/index.ts

 export function helloWorld(){ return 'Hello world!' } 

package.json Skripte package.json :

  "build": "tsc", "dev": "tsc --watch" 

Jetzt können wir einen einmaligen Build ausführen mit:

 npm run build 

Und wiederverwendbar:

 npm run dev 

Codestyle

Um den Codestil zu testen, verwenden wir tslint und prettier und führen dies vor dem Festschreiben aus.
Installieren Sie tslint, hübscher, heiser:

 npm i tslint tslint-config-prettier prettier husky -D 

Konfigurieren Sie hübscher, indem Sie eine .prettierrc Datei mit dem Inhalt erstellen

 { "printWidth": 120, "trailingComma": "none", "singleQuote": true } 

Fügen Sie ein Skript hinzu, um hübscher zu arbeiten

  "prettier": "npx prettier --write src/* test/* example/*" 

Konfigurieren Sie tslint, indem Sie eine tslint.json Datei mit dem Inhalt erstellen

 { "extends": ["tslint:recommended", "tslint-config-prettier"], "rules": { "curly": false, "ordered-imports": false, "interface-name": [true, "never-prefix"] } } 

Fügen Sie das tslint-Skript und den Codestyle hinzu:

  "tslint": "tslint -p tslint -p tsconfig.json", "codestyle": "npm run prettier && npm run tslint" 

Lassen Sie nun den Codestyle vor dem Festschreiben ausführen und zu package.json hinzufügen:

 "husky": { "hooks": { "pre-commit": "npm run codestyle" } } 

Die Dokumentation

Um Webseiten aus md zu generieren, verwenden wir docsify und um Dokumentation aus api tsdoc zu generieren

Installieren Sie sie

 npm i docsify-cli typedoc -D 

Erstellen README.md im Ordner docs README.md :

 # Best lib ever Best lib ever `helloWorld` return `'hello world'` ## Example ``js const a = require('') console.log(a.helloWorld()) // prints 'Hello world!' `` 

moreExample.md Sie außerdem moreExample.md
Die Quelle liegt hier

Weiter machen

 npx docsify init ./docs 

Richten Sie die Seitenleiste in docsify ein, indem Sie die Datei sidebar.md erstellen

 # Best lib ever * [Best lib ever](/) * [More examples](/moreExamples) 

Um all diese Schönheit zu sehen, fügen Sie ein Skript hinzu

 "docsify": "docsify serve ./docs" 

Und renn

 npm run docsify 

Nehmen wir nun eine statische Methodendokumentation
Fügen Sie zunächst eine Beschreibung der Funktion in den Code ein:

 /** * Returns `Hello world!` */ 

.gitinore Sie in .gitinore docs/api

Skript für typedoc hinzufügen

 "typedoc": "typedoc --out ./docs/api ./src --mode file --readme docs/README.md" 

Fügen Sie abschließend das endgültige Dock-Skript hinzu

 "docs": "npm run typedoc && npm run docsify" 

Alles ist jetzt genug, um die Docks zu sehen

 npm run docs 

Tests

Scherz installieren

 npm install --save-dev @types/jest @types/node jest ts-jest typescript 

Lassen Sie uns die jest.config.js erstellen

 module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], } 

Erstellen Sie einen Test ( test/index.ts ):

 import { helloWorld } from "../src"; test('Should return helloWorld', () => { expect(helloWorld()).toBe('Hello world!') }) 

Und jetzt können Sie Tests ausführen

 npm test 

Fassen Sie zusammen

Jetzt können wir

 npm run build #   npm run dev #    npm run codestyle #    npm run docs #   npm test #   

Das endgültige Github- Repository