Hola Habr Este artículo trata sobre cómo escribir Hello World con la última tecnología.
Al final, obtenemos una biblioteca hello world que:
- Utiliza mecanografiado
- Se encarga de codestyle
- Genera un muelle
- Realiza pruebas
Comience comenzó
En la nueva carpeta, inicie git y npm
git init npm init
Al configurar 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
Estructura del proyecto
El proyecto tendrá los siguientes directorios:
- src: aquí estarán los archivos de la propia biblioteca (mecanografiado)
- lib - Aquí tsc pondrá los archivos compilados de src
- prueba - Aquí están las pruebas
- ejemplos - Ejemplos de uso
También necesita agregar a .gitignore :
lib/ node_modules/
Mecanografiado
Ahora instale y configure el mecanografiado:
npm i typescript -D
Y cree un archivo llamado tsconifg.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./lib", "strict": true, "sourceMap": true }, "include": ["src"], "exclude": ["node_modules", "**/__tests__/*"] }
Ahora hagamos que el archivo principal src/index.ts
export function helloWorld(){ return 'Hello world!' }
Agregue también scripts a package.json :
"build": "tsc", "dev": "tsc --watch"
Ahora podemos ejecutar una compilación única usando:
npm run build
Y reutilizable:
npm run dev
Codestyle
Para probar el estilo del código, usaremos tslint y más bonito, así como ejecutaremos esto antes de confirmar.
Instale tslint, más bonito, husky:
npm i tslint tslint-config-prettier prettier husky -D
Configure prettier creando un archivo .prettierrc con el contenido
{ "printWidth": 120, "trailingComma": "none", "singleQuote": true }
Agregue un script para ejecutar más bonito
"prettier": "npx prettier --write src/* test/* example/*"
Configure tslint creando un archivo tslint.json con el contenido
{ "extends": ["tslint:recommended", "tslint-config-prettier"], "rules": { "curly": false, "ordered-imports": false, "interface-name": [true, "never-prefix"] } }
Agregue el script tslint y el estilo de código:
"tslint": "tslint -p tslint -p tsconfig.json", "codestyle": "npm run prettier && npm run tslint"
Ahora hagamos que codestyle se ejecute antes de confirmar y agregar a package.json :
"husky": { "hooks": { "pre-commit": "npm run codestyle" } }
La documentación
Para generar páginas web desde md usamos docsify y para generar documentación desde api tsdoc
Instalarlos
npm i docsify-cli typedoc -D
En la carpeta docs, cree README.md :
# Best lib ever Best lib ever `helloWorld` return `'hello world'` ## Example ``js const a = require('') console.log(a.helloWorld()) // prints 'Hello world!' ``
También agregue moreExample.md
La fuente yace aquí
Siguiente hacer
npx docsify init ./docs
Configure la barra lateral en docsify creando el archivo sidebar.md
# Best lib ever * [Best lib ever](/) * [More examples](/moreExamples)
Ahora, para ver toda esta belleza, agregue un script
"docsify": "docsify serve ./docs"
Y correr
npm run docsify
Ahora tomemos la documentación de un método estático.
Primero, agregue una descripción de la función en el código:
En .gitinore agregue docs/api
Agregar script para typedoc
"typedoc": "typedoc --out ./docs/api ./src --mode file --readme docs/README.md"
Finalmente, agregue el script de acoplamiento final
"docs": "npm run typedoc && npm run docsify"
Ahora todo es suficiente para ver los muelles.
npm run docs
Pruebas
Instalar broma
npm install --save-dev @types/jest @types/node jest ts-jest typescript
jest.config.js configuración jest.config.js
module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], }
Cree una prueba ( test/index.ts ):
import { helloWorld } from "../src"; test('Should return helloWorld', () => { expect(helloWorld()).toBe('Hello world!') })
Y ahora puedes ejecutar pruebas en
npm test
Resumir
Ahora podemos
npm run build
El repositorio final de github