Salut, Habr. Cet article explique comment écrire Hello world avec les dernières technologies.
À la fin, nous obtenons une bibliothèque du monde bonjour qui:
- Utilise dactylographié
- Prend soin du codestyle
- Génère un dock
- Effectue des tests
Début commencé
Dans le nouveau dossier, lancez git et npm
git init npm init
Lors de la configuration de 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
Structure du projet
Le projet aura les répertoires suivants:
- src - Voici les fichiers de la bibliothèque elle-même (tapuscrit)
- lib - Ici tsc mettra les fichiers compilés de src
- test - Voici les tests
- exemples - Exemples d'utilisation
Vous devez également ajouter à .gitignore :
lib/ node_modules/
Typographie
Maintenant, installez et configurez tapuscript:
npm i typescript -D
Et créez un fichier appelé tsconifg.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./lib", "strict": true, "sourceMap": true }, "include": ["src"], "exclude": ["node_modules", "**/__tests__/*"] }
src/index.ts maintenant le fichier principal se trouvant src/index.ts
export function helloWorld(){ return 'Hello world!' }
Ajoutez également des scripts à package.json :
"build": "tsc", "dev": "tsc --watch"
Nous pouvons maintenant exécuter une génération unique en utilisant:
npm run build
Et réutilisable:
npm run dev
Codestyle
Pour tester le style de code, nous allons utiliser tslint et plus joli, ainsi que l'exécuter avant de valider.
Installez tslint, plus joli, husky:
npm i tslint tslint-config-prettier prettier husky -D
Configurer plus joli en créant un fichier .prettierrc avec le contenu
{ "printWidth": 120, "trailingComma": "none", "singleQuote": true }
Ajouter un script pour exécuter plus joli
"prettier": "npx prettier --write src/* test/* example/*"
Configurer tslint en créant un fichier tslint.json avec le contenu
{ "extends": ["tslint:recommended", "tslint-config-prettier"], "rules": { "curly": false, "ordered-imports": false, "interface-name": [true, "never-prefix"] } }
Ajoutez le script tslint et le codestyle:
"tslint": "tslint -p tslint -p tsconfig.json", "codestyle": "npm run prettier && npm run tslint"
Faisons maintenant exécuter le codestyle avant de valider et ajoutons à package.json :
"husky": { "hooks": { "pre-commit": "npm run codestyle" } }
La documentation
Pour générer des pages Web à partir de md, nous utilisons docsify et pour générer de la documentation à partir d'api tsdoc
Installez-les
npm i docsify-cli typedoc -D
Dans le dossier docs, créez README.md :
# Best lib ever Best lib ever `helloWorld` return `'hello world'` ## Example ``js const a = require('') console.log(a.helloWorld()) // prints 'Hello world!' ``
Ajoutez également moreExample.md
La source se trouve ici
Prochaine faire
npx docsify init ./docs
Configurer la barre latérale dans docsify en créant le fichier sidebar.md
# Best lib ever * [Best lib ever](/) * [More examples](/moreExamples)
Maintenant, pour voir toute cette beauté, ajoutez un script
"docsify": "docsify serve ./docs"
Et courir
npm run docsify
Prenons maintenant une documentation de méthode statique
Tout d'abord, ajoutez une description de la fonction dans le code:
Dans .gitinore ajoutez docs/api
Ajouter un script pour typedoc
"typedoc": "typedoc --out ./docs/api ./src --mode file --readme docs/README.md"
Enfin, ajoutez le script de dock final
"docs": "npm run typedoc && npm run docsify"
Tout est maintenant suffisant pour voir les quais
npm run docs
Les tests
Installer la plaisanterie
npm install --save-dev @types/jest @types/node jest ts-jest typescript
Créons la configuration jest.config.js
module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], }
Créez un test ( test/index.ts ):
import { helloWorld } from "../src"; test('Should return helloWorld', () => { expect(helloWorld()).toBe('Hello world!') })
Et maintenant, vous pouvez exécuter des tests sur
npm test
Résumer
Maintenant on peut
npm run build
Le dépôt github final