Oi Habr. Este artigo é sobre como escrever Hello world com a tecnologia mais recente.
No final, temos uma biblioteca olá mundo que:
- Usa texto datilografado
- Cuida do estilo de código
- Gera uma doca
- Realiza testes
Início iniciado
Na nova pasta, inicie git e npm
git init npm init
Ao 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
Estrutura do projeto
O projeto terá os seguintes diretórios:
- src - Aqui estão os arquivos da própria biblioteca (datilografada)
- lib - Aqui o tsc colocará os arquivos compilados do src
- teste - Aqui estão os testes
- examples - Exemplos de uso
Você também precisa adicionar ao .gitignore :
lib/ node_modules/
Texto datilografado
Agora instale e configure o texto datilografado:
npm i typescript -D
E crie um arquivo chamado tsconifg.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./lib", "strict": true, "sourceMap": true }, "include": ["src"], "exclude": ["node_modules", "**/__tests__/*"] }
Agora vamos colocar o arquivo principal em src/index.ts
export function helloWorld(){ return 'Hello world!' }
Adicione também scripts ao package.json :
"build": "tsc", "dev": "tsc --watch"
Agora podemos executar uma compilação única usando:
npm run build
E reutilizável:
npm run dev
Codestyle
Para testar o estilo do código, usaremos tslint e mais bonito, além de executá-lo antes de confirmar.
Instale tslint, mais bonito, rouco:
npm i tslint tslint-config-prettier prettier husky -D
Configure mais bonito criando um arquivo .prettierrc com o conteúdo
{ "printWidth": 120, "trailingComma": "none", "singleQuote": true }
Adicione um script para executar mais bonita
"prettier": "npx prettier --write src/* test/* example/*"
Configure o tslint criando um arquivo tslint.json com o conteúdo
{ "extends": ["tslint:recommended", "tslint-config-prettier"], "rules": { "curly": false, "ordered-imports": false, "interface-name": [true, "never-prefix"] } }
Adicione o script tslint e o estilo de código:
"tslint": "tslint -p tslint -p tsconfig.json", "codestyle": "npm run prettier && npm run tslint"
Agora vamos executar o codestyle antes de confirmar e adicionar ao package.json :
"husky": { "hooks": { "pre-commit": "npm run codestyle" } }
A documentação
Para gerar páginas da Web a partir do md, usamos o docsify e a documentação do api tsdoc
Instale-os
npm i docsify-cli typedoc -D
Na pasta docs, crie README.md :
# Best lib ever Best lib ever `helloWorld` return `'hello world'` ## Example ``js const a = require('') console.log(a.helloWorld()) // prints 'Hello world!' ``
Adicione também moreExample.md
A fonte está aqui
Próximo fazer
npx docsify init ./docs
Configure a barra lateral no docsify criando o arquivo sidebar.md
# Best lib ever * [Best lib ever](/) * [More examples](/moreExamples)
Agora, para ver toda essa beleza, adicione um script
"docsify": "docsify serve ./docs"
E corra
npm run docsify
Agora vamos dar uma documentação de método estático
Primeiro, adicione uma descrição da função no código:
No .gitinore adicione docs/api
Adicionar script para typedoc
"typedoc": "typedoc --out ./docs/api ./src --mode file --readme docs/README.md"
Por fim, adicione o script de encaixe final
"docs": "npm run typedoc && npm run docsify"
Agora tudo é suficiente para ver as docas
npm run docs
Testes
Instalar brincadeira
npm install --save-dev @types/jest @types/node jest ts-jest typescript
Vamos criar a configuração jest.config.js
module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], }
Crie um teste ( test/index.ts ):
import { helloWorld } from "../src"; test('Should return helloWorld', () => { expect(helloWorld()).toBe('Hello world!') })
E agora você pode executar testes em
npm test
Resumir
Agora podemos
npm run build
O repositório final do github