Hai, Habr. Artikel ini adalah tentang bagaimana menulis Hello world dengan teknologi terbaru.
Pada akhirnya, kami mendapatkan perpustakaan hello world yang:
- Menggunakan naskah
- Merawat gaya kode
- Menghasilkan dermaga
- Melakukan tes
Mulai, dimulai
Di folder baru, jalankan git dan npm
git init npm init
Saat mengatur 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
Struktur proyek
Proyek akan memiliki direktori berikut:
- src - Ini akan menjadi file perpustakaan itu sendiri (naskah)
- lib - Di sini tsc akan meletakkan file yang dikompilasi dari src
- test - Inilah tes-tesnya
- contoh - Contoh penggunaan
Anda juga perlu menambahkan ke .gitignore :
lib/ node_modules/
Naskah
Sekarang instal dan konfigurasikan naskah:
npm i typescript -D
Dan buat file bernama tsconifg.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./lib", "strict": true, "sourceMap": true }, "include": ["src"], "exclude": ["node_modules", "**/__tests__/*"] }
Sekarang mari kita buat file utama yang terletak src/index.ts
export function helloWorld(){ return 'Hello world!' }
Juga tambahkan skrip ke package.json :
"build": "tsc", "dev": "tsc --watch"
Sekarang kita dapat menjalankan build satu kali menggunakan:
npm run build
Dan dapat digunakan kembali:
npm run dev
Codestyle
Untuk menguji gaya kode, kita akan menggunakan tslint dan lebih cantik, serta menjalankan ini sebelum melakukan.
Pasang tslint, lebih cantik, serak:
npm i tslint tslint-config-prettier prettier husky -D
Konfigurasikan lebih cantik dengan membuat file .prettierrc dengan kontennya
{ "printWidth": 120, "trailingComma": "none", "singleQuote": true }
Tambahkan skrip untuk menjalankan lebih cantik
"prettier": "npx prettier --write src/* test/* example/*"
Konfigurasikan tslint dengan membuat file tslint.json dengan kontennya
{ "extends": ["tslint:recommended", "tslint-config-prettier"], "rules": { "curly": false, "ordered-imports": false, "interface-name": [true, "never-prefix"] } }
Tambahkan skrip dan codestyle tslint:
"tslint": "tslint -p tslint -p tsconfig.json", "codestyle": "npm run prettier && npm run tslint"
Sekarang mari kita buat codestyle dijalankan sebelum melakukan dan tambahkan ke package.json :
"husky": { "hooks": { "pre-commit": "npm run codestyle" } }
Dokumentasi
Untuk menghasilkan halaman web dari md kami menggunakan docsify dan untuk menghasilkan dokumentasi dari api tsdoc
Pasang mereka
npm i docsify-cli typedoc -D
Di folder dokumen, buat README.md :
# Best lib ever Best lib ever `helloWorld` return `'hello world'` ## Example ``js const a = require('') console.log(a.helloWorld()) // prints 'Hello world!' ``
Juga tambahkan moreExample.md
Sumbernya ada di sini
Selanjutnya lakukan
npx docsify init ./docs
Siapkan sidebar di docsify dengan membuat file sidebar.md
# Best lib ever * [Best lib ever](/) * [More examples](/moreExamples)
Sekarang, untuk melihat semua keindahan ini, tambahkan skrip
"docsify": "docsify serve ./docs"
Dan lari
npm run docsify
Sekarang mari kita ambil dokumentasi metode statis
Pertama, tambahkan deskripsi fungsi dalam kode:
Di .gitinore tambahkan docs/api
Tambahkan skrip untuk typedoc
"typedoc": "typedoc --out ./docs/api ./src --mode file --readme docs/README.md"
Akhirnya, tambahkan skrip dock final
"docs": "npm run typedoc && npm run docsify"
Sekarang semuanya sudah cukup untuk melihat dermaga
npm run docs
Tes
Pasang lelucon
npm install --save-dev @types/jest @types/node jest ts-jest typescript
Mari kita membuat konfigurasi jest.config.js
module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], }
Buat tes ( test/index.ts ):
import { helloWorld } from "../src"; test('Should return helloWorld', () => { expect(helloWorld()).toBe('Hello world!') })
Dan sekarang Anda dapat menjalankan tes
npm test
Ringkaslah
Sekarang kita bisa
npm run build
Repositori github terakhir